Как определить, когда значение @Input () изменяется в Angular?

Используйте метод жизненного цикла ngOnChanges() в вашем компоненте.

ngOnChanges вызывается сразу после того, как свойства, связанные с данными, были проверяется, и перед просмотром и содержанием дети проверяются, если хотя бы один из них изменился.

Вот Docs.

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

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

EDIT:

Как указал Джон ниже, вы можете использовать подпись SimpleChanges при использовании нотной записи в виде скобок, а не в виде точечной нотации.

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

Самый безопасный @Input - использовать совместно используемый сервис вместо параметра @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);
  }
}

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

Я просто хочу добавить, что есть еще один крючок Lifecycle с именем DoCheck, который полезен, если значение @Input не является примитивным значением.

У меня есть Array как Input, поэтому он не запускает событие OnChanges, когда содержимое изменяется (потому что проверка того, что Angular делает это "просто" и не глубока, поэтому массив все еще является массивом, даже если содержимое в массиве изменилось).

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

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

пожалуйста, попробуйте использовать этот метод. Надеюсь это поможет

Если вы не хотите использовать ngOnChange, реализуйте метод og onChange(), вы также можете подписаться на изменения определенного элемента с помощью события valueChanges, ETC.

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

});

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

markForCheck(), написанный из-за использования в этом объявлении:

  changeDetection: ChangeDetectionStrategy.OnPush

Там пример в руководстве:

https://angular.io/guide/component-interaction#intercept-input-property-changes-with-ngonchanges

Вы также можете иметь наблюдаемое, которое инициирует изменения в родительском компоненте (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
});
}