来自组件的指令中@Input的动态值（角度4、5、6）

Question

指令中定义的输入：

@Input items: any[];

组件中定义的数据：

data: string[] = ['Item 1', Item 2', 'Item 3'];

组件模板中使用的指令：

<input type="text" myDirective [items]="data">

每当在Component中更改data数组时，如何更新指令中的items值？

例如，如果组件中的data更新为：

data: string[] = ['Item 1', Item 2', 'Item 3', 'Item 4'];

'Item 4'必须在指令中可以访问。

Answer 1

您可以像这样通过打字稿使用getter setter setter-

private items: any;

@Input() set items(value: any) {

   this._categoryId = value;
   this.doSomething(this._categoryId);

}

get items(): any {

    return this._categoryId;

}

• 第二种方法-

或者您可以像这样简单地将ngOnChanges用于摘要周期的任何更改-

  ngOnChanges(changes: SimpleChanges) {
      /// your changes in the binding
  }

Answer 2

伪指令不会检测到仅将数据推送到数组中。 您需要将整个data引用更改为一个较新的数组。

然后，您可以侦听指令上的OnChanges生命周期事件并检查数据的值

ngOnChanges(changes: SimpleChanges) {
   /// changes.data
}