Динамические значения для @Input в Директиве от Компонента (Угловые 4, 5, 6)

Question

Вход определен в директиве:

@Input items: any[];

Данные определены в компоненте:

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

Директива, используемая в шаблоне компонента:

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

Как мы можем обновлять значения items в Директиве при изменении массива data в Компоненте?

Например,если data в Компоненте обновлен до:

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

'Item 4' должен быть доступен внутри Директивы.

Answer 1

Вы можете использовать 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
  }

Answer 2

Директива не обнаружит простое добавление данных в массив.Вам нужно изменить всю ссылку data на более новый массив.

Затем вы можете прослушать событие жизненного цикла OnChanges в директиве и проверить значение данных

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