Як виявити, коли значення @Input () змінюється на Angular?

У мене є батьківський компонент ( CategoryComponent ), дочірній компонент ( videoListComponent ) та ApiService.

У мене більша частина цього працює добре, тобто кожен компонент може отримати доступ до json api та отримати відповідні дані за допомогою спостережуваних даних.

В даний час компонент списку відео просто отримує всі відео, я хотів би відфільтрувати це лише до відео в певній категорії, я досяг цього, передавши категоріюId дитині через @Input().

CategoryComponent.html

<video-list *ngIf="category" [categoryId]="category.id"></video-list>

Це працює, і коли батьківська категорія CategoryComponent змінюється, тоді через нього передається значення categoryId, @Input()але мені потрібно виявити це у VideoListComponent та повторно запитати масив відео через APIService (з новою категорієюIdId).

У AngularJS я зробив би $watchзмінну. Який найкращий спосіб впоратися з цим?

Насправді, існує два способи виявлення та дії, коли вхід змінюється дочірньою складовою в angular2 +:

1. Ви можете використовувати метод життєвого циклу ngOnChanges (), як це також було зазначено у попередніх відповідях:

    @Input() categoryId: string;

    ngOnChanges(changes: SimpleChanges) {

        this.doSomething(changes.categoryId.currentValue);
        // You can also use categoryId.previousValue and 
        // categoryId.firstChange for comparing old and new values

    }

Посилання на документацію: ngOnChanges, SimpleChanges, SimpleChange
Demo Приклад: Подивіться на цей планкер

2. Крім того, ви також можете встановити властивість введення властивостей у такий спосіб:

    private _categoryId: string;

    @Input() set categoryId(value: string) {

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

    }

    get categoryId(): string {

        return this._categoryId;

    }

Посилання на документацію: Подивіться тут .

Демонстраційний приклад. Подивіться на цей планкер .

Який підхід потрібно використовувати?

Якщо ваш компонент має кілька входів, то, якщо ви будете використовувати ngOnChanges (), ви отримаєте всі зміни для всіх входів одночасно в межах ngOnChanges (). Використовуючи такий підхід, ви також можете порівняти поточні та попередні значення змін, які змінилися, та вжити відповідних дій.

Однак якщо ви хочете щось зробити, коли змінюється лише певний окремий вхід (і вам не байдуже про інші входи), можливо, простіше використовувати налаштування властивостей вводу. Однак такий підхід не забезпечує побудованого способу порівняння попередніх та поточних значень зміненого входу (що можна легко зробити методом ngOnChanges життєвого циклу).

РЕДАКТИРУЙТЕ 2017-07-25: АНГУЛЯРНЕ ВИДАЛЕННЯ ЗМІНИ МОЖЕ НЕ ПОЖЕЖИТЬСЯ ДІЯЛЬКИХ ОКРУГИ

Зазвичай виявлення змін як для сеттера, так і для ngOnChanges запускається кожного разу, коли батьківський компонент змінює дані, які він передає дочірній, за умови, що дані є примітивним типом даних JS (рядок, число, булевий) . Однак у наступних сценаріях це не спрацює, і вам доведеться вжити додаткових дій, щоб змусити його працювати.

1. Якщо ви використовуєте вкладений об'єкт або масив (замість примітивного типу даних JS) для передачі даних від батьків до дитини, виявлення змін (використовуючи сетер або ngchanges) може не спрацювати, як це також було зазначено у відповіді користувача: muetzerich. Рішення шукайте тут .

2. Якщо ви мутуєте дані за межами кутового контексту (тобто зовні), то кутовий не буде знати про зміни. Можливо, вам доведеться використовувати ChangeDetectorRef або NgZone у своєму компоненті для того, щоб дізнатись про зовнішні зміни і тим самим викликати виявлення змін. Зверніться до цього .

Використовуйте ngOnChanges()метод життєвого циклу у своєму компоненті.

ngOnChanges викликається відразу після перевірки властивостей, пов'язаних з даними, і перед тим, як перевіряти і переглядати діти та вміст, якщо хоча б один із них змінився.

Ось Документи .

Я отримував помилки в консолі, а також у компіляторі та IDE під час використання SimpleChangesтипу підпису функції. Щоб запобігти помилкам, використовуйте anyключове слово в підписі.

ngOnChanges(changes: any) {
    console.log(changes.myInput.currentValue);
}

Редагувати:

Як зазначав Джон нижче, ви можете використовувати SimpleChangesпідпис при використанні нотацій дужок, а не крапкових позначень.

ngOnChanges(changes: SimpleChanges) {
    console.log(changes['myInput'].currentValue);
}

Найбезпечніший вибір повинен піти із загальною службою замість частини з @Inputпараметром. Також @Inputпараметр не виявляє змін у складному типу вкладених об'єктів.

Простий приклад послуги такий:

Service.ts

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';

@Injectable()
export class SyncService {

    private thread_id = new Subject<number>();
    thread_id$ = this.thread_id.asObservable();

    set_thread_id(thread_id: number) {
        this.thread_id.next(thread_id);
    }

}

Component.ts

export class ConsumerComponent implements OnInit {

  constructor(
    public sync: SyncService
  ) {
     this.sync.thread_id$.subscribe(thread_id => {
          **Process Value Updates Here**
      }
    }

  selectChat(thread_id: number) {  <--- How to update values
    this.sync.set_thread_id(thread_id);
  }
}

Ви можете використовувати аналогічну реалізацію в інших компонентах, і всі ваші комп’ютери матимуть однакові загальні значення.

Я просто хочу додати, що існує ще одна гачка життєвого циклу, яка називається, DoCheckщо корисно, якщо @Inputзначення не є примітивним значенням.

У мене є масив як Inputтакий, це не викликає OnChangesподії при зміні вмісту (тому що перевірка, яку робить Angular, є простою і не глибокою, тому масив все ще є масивом, навіть якщо вміст масиву змінився).

Потім я реалізую якийсь спеціальний код перевірки, щоб вирішити, чи хочу оновити свій погляд зі зміненим масивом.

  @Input()
  public set categoryId(categoryId: number) {
      console.log(categoryId)
  }

будь ласка, спробуйте скористатися цим методом. Сподіваюсь, це допомагає

Ви також можете мати спостереження, яке запускає зміни батьківського компонента (CategoryComponent) і робити те, що ви хочете зробити підпискою в дочірньому компоненті. (videoListComponent)

service.ts 
public categoryChange$ : ReplaySubject<any> = new ReplaySubject(1);

-----------------
CategoryComponent.ts
public onCategoryChange(): void {
  service.categoryChange$.next();
}

-----------------
videoListComponent.ts
public ngOnInit(): void {
  service.categoryChange$.subscribe(() => {
   // do your logic
});
}

Тут ngOnChanges запускається завжди, коли зміниться ваша властивість введення:

ngOnChanges(changes: SimpleChanges): void {
 console.log(changes.categoryId.currentValue)
}

Це рішення використовує проксі- клас і пропонує такі переваги:

• Дозволяє споживачеві використовувати сили RXJS
• Більш компактні, ніж інші рішення, пропоновані до цих пір
• Більш безпечний тип, ніж використанняngOnChanges()

Приклад використання:

@Input()
public num: number;
numChanges$ = observeProperty(this as MyComponent, 'num');

Утиліта:

export function observeProperty<T, K extends keyof T>(target: T, key: K) {
  const subject = new BehaviorSubject<T[K]>(target[key]);
  Object.defineProperty(target, key, {
    get(): T[K] { return subject.getValue(); },
    set(newValue: T[K]): void {
      if (newValue !== subject.getValue()) {
        subject.next(newValue);
      }
    }
  });
  return subject;
}

Якщо ви не хочете використовувати метод ngOnChange реалізації og onChange (), ви також можете підписатися на зміни певного елемента за допомогою події valueChanges , ETC.

 myForm= new FormGroup({
first: new FormControl()   

});

this.myForm.valueChanges.subscribe(formValue => {
  this.changeDetector.markForCheck();
});

маркаForCheck () написана через використання в цьому декларації:

  changeDetection: ChangeDetectionStrategy.OnPush

Ви також можете просто передати EventEmitter як Input. Не зовсім впевнений, чи це найкраща практика ...

CategoryComponent.ts:

categoryIdEvent: EventEmitter<string> = new EventEmitter<>();

- OTHER CODE -

setCategoryId(id) {
 this.category.id = id;
 this.categoryIdEvent.emit(this.category.id);
}

CategoryComponent.html:

<video-list *ngIf="category" [categoryId]="categoryIdEvent"></video-list>

А у VideoListComponent.ts:

@Input() categoryIdEvent: EventEmitter<string>
....
ngOnInit() {
 this.categoryIdEvent.subscribe(newID => {
  this.categoryId = newID;
 }
}