Angular结构指令中的输入绑定

huangapple go评论131阅读模式
英文:

Angular input binding in structural directive

问题

我无法找到一种方法来绑定我的结构性指令中的多个输入:

视图

<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() 中,这两个 @Input() 将都变成 undefined

英文:

I cannot find a way to bind multiple inputs in my structural directive:

view

   &lt;div *requiredAccessRight requiredA=&quot;[EnumA.A]&quot; requiredB=&quot;[EnumB.A]&quot;&gt;

directive

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

during ngOnInit() both Inputs() will end up undefined

答案1

得分: 5

指令的输入遵循以下命名约定:
> 指令输入名称 = 指令选择器 + 标识符(首字母大写)

因此,要创建 requiredArequiredB 作为输入,您需要拥有 requiredAccessRightRequiredArequiredAccessRightRequiredB

在使用指令时,您始终需要将一个值传递为指令名称值。

例如,在 requiredAccessRight 指令中,您必须将 requiredAccessRight 作为输入(这是强制性的)。

在使用指令时,第一个值始终是没有任何标识符的,该值将分配给指令名称值。然后,您可以使用 ; 作为分隔符传递其他自定义输入。

指令

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模板中的用法

由于第一个值是必需的,您可以在组件中的位置处传递您的值,而不是 &#39;&#39;[],我只是在这里使用占位符。

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

The inputs of directive follows naming convention as follows:
> Directive input name = directiveSelector + identifier (first character capital)

So in order to create requiredA and requiredB as inputs you need to have requiredAccessRightRequiredA and requiredAccessRightRequiredB.

After creating these inputs while using the directive, you always need to pass one value as directive name value.

e.g. in requiredAccessRight directive you must have requiredAccessRight as input (this is mandatory).

While using the directive, first value will always be without any iedntifier which will be assigned to directive name value. After that by using ; as separator you can pass other custom inputs.

Directive

import { Directive, TemplateRef, ViewContainerRef, Input } from &#39;@angular/core&#39;;

@Directive({
  selector: &#39;[requiredAccessRight]&#39;
})
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&lt;any&gt;, private vcr: ViewContainerRef) { }
}

Usage in HTML template

As first value is mandatory you can pass your value from component in place of &#39;&#39; or [], I am just using placeholder here.

&lt;button *requiredAccessRight=&quot;&#39;&#39;;requiredA: [enumA]; requiredB: [enumB]&quot;&gt;click&lt;/button&gt;
&lt;!-- or --&gt;
&lt;button *requiredAccessRight=&quot;[];requiredA: [enumA]; requiredB: [enumB]&quot;&gt;click&lt;/button&gt;
&lt;!-- or --&gt;
&lt;button *requiredAccessRight=&quot;let i;requiredA: [enumA]; requiredB: [enumB]&quot;&gt;click&lt;/button&gt;

huangapple
  • 本文由 发表于 2020年1月3日 19:24:29
  • 转载请务必保留本文链接:https://go.coder-hub.com/59577755.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定