时间戳

首页 > 解决方案 > 结构指令中的角度输入绑定

angular - 结构指令中的角度输入绑定

问题描述

我找不到在结构指令中绑定多个输入的方法：

看法

   <div *requiredAccessRight requiredA="[EnumA.A]" requiredB="[EnumB.A]">

指示

   @Directive({
        // tslint:disable-next-line: directive-selector
        selector: '[requiredAccessRight]',
    })
          export class RequiredAccessRightDirective implements OnInit {
                @Input() requiredA: EnumA[];
                @Input() requiredB: EnumB[];
...
           }

在ngOnInit()两者都Inputs()将结束undefined

标签： angular

解决方案

指令的输入遵循如下命名约定：

指令输入名称 = 指令选择器 + 标识符（首字母大写）

因此，为了创建requiredA和requiredB作为输入，您需要拥有requiredAccessRightRequiredA和requiredAccessRightRequiredB。

在使用指令时创建这些输入后，您始终需要传递一个值作为指令名称值。

例如，在requiredAccessRight指令中，您必须将requiredAccessRight其作为输入（这是强制性的）。

使用指令时，第一个值将始终没有任何 iedntifier，它将分配给指令名称值。之后，通过;用作分隔符，您可以传递其他自定义输入。

指示

import { Directive, TemplateRef, ViewContainerRef, Input } from '@angular/core';

@Directive({
  selector: '[requiredAccessRight]'
})
export class DirectiveDirective {

  private _requiredAccessRight: any;
  private _requiredAccessRightRequiredA: any;
  private _requiredAccessRightRequiredB: any;

  @Input() set requiredAccessRight(value: any[]) {
    this._requiredAccessRight = value;
    console.log(this._requiredAccessRight)
  }

  @Input() set requiredAccessRightRequiredA(enumA) {
    this._requiredAccessRightRequiredA = enumA;
    console.log(this._requiredAccessRightRequiredA);
  }

  @Input() set requiredAccessRightRequiredB(enumB) {
    this._requiredAccessRightRequiredB = enumB;
    console.log(this._requiredAccessRightRequiredB);
  }

  constructor(private templateRef: TemplateRef<any>, private vcr: ViewContainerRef) { }
}

HTML 模板中的用法

由于第一个值是强制性的，您可以从组件传递您的值来代替''or []，我只是在这里使用占位符。

<button *requiredAccessRight="'';requiredA: [enumA]; requiredB: [enumB]">click</button>
<!-- or -->
<button *requiredAccessRight="[];requiredA: [enumA]; requiredB: [enumB]">click</button>
<!-- or -->
<button *requiredAccessRight="let i;requiredA: [enumA]; requiredB: [enumB]">click</button>

推荐阅读