来自组件的指令中 @Input 的动态值 (Angular 4, 5, 6)

Question

指令中定义的输入：

@Input items: any[];

组件中定义的数据：

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

组件模板中使用的指令：

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

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

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

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

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

Answer 1

指令不会检测到只是将数据推入数组。您需要将 data 的整个引用更改为更新的数组。

然后你可以在指令上监听OnChanges生命周期事件并检查数据的值

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

Answer 2

你可以像这样通过 typescript 使用 getter 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
  }

来自组件的指令中 @Input 的动态值 (Angular 4, 5, 6)

Dynamic values for @Input in Directive from Component (Angular 4, 5, 6)

angular

angular5

angular6