结构指令中的 Angular 输入绑定(bind)

Question

我找不到在结构指令中绑定(bind)多个输入的方法:

查看

   <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

Answer 1

指令的输入遵循命名约定，如下所示:

Directive input name = directiveSelector + identifier (first character capital)

因此，为了创建 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 模板中的用法

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

<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>