@Input（）値がAngularで変更されたことを検出する方法は？

親コンポーネント（CategoryComponent）、子コンポーネント（videoListComponent）、およびApiServiceがあります。

私はこれのほとんどがうまく機能しています。つまり、各コンポーネントはjson apiにアクセスして、オブザーバブルを介して関連データを取得できます。

現在、動画リストコンポーネントはすべての動画を取得するだけです。これを特定のカテゴリの動画のみにフィルタリングしたいと思います@Input()。

CategoryComponent.html

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

これは機能し、CategoryComponentの親カテゴリが変更されると、categoryId値が経由で渡されますが@Input()、VideoListComponentでこれを検出し、APIService（新しいcategoryIdを使用）を介してビデオ配列を再リクエストする必要があります。

AngularJS $watchでは、変数に対してaを実行したでしょう。これを処理する最良の方法は何ですか？

実際には、子コンポーネントの入力がangular2 +で変化したときに検出して対処する方法が2つあります。

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の
例：このプランカーを見てください。

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を編集：いくつかの状況下では、角度変化の検出がうまくいかない場合があります

通常、データがJSプリミティブデータ型（string、number、boolean）である限り、setterとngOnChangesの両方の変更検出は、親コンポーネントが子に渡すデータを変更するたびに発生します。ただし、次のシナリオでは、起動せず、機能させるために追加のアクションを実行する必要があります。

1. ネストされたオブジェクトまたは配列（JSプリミティブデータ型の代わりに）を使用してデータを親から子に渡す場合、ユーザーによる回答（muetzerich）でも説明されているように、変更検出（setterまたはngchangesのいずれかを使用）が起動しない場合があります。解決策については、こちらをご覧ください。

2. Angularのコンテキスト外で（つまり、外部で）データを変更する場合、Angleは変更を認識しません。コンポーネントでChangeDetectorRefまたはNgZoneを使用して、外部の変更を角度で認識し、変更の検出をトリガーする必要がある場合があります。こちらをご覧ください。

ngOnChanges()コンポーネントでライフサイクルメソッドを使用します。

ngOnChangesは、データにバインドされたプロパティがチェックされた直後で、ビューとコンテンツの子の少なくとも1つが変更されているかどうかがチェックされる前に呼び出されます。

こちらがドキュメントです。

SimpleChanges関数シグネチャで型を使用すると、コンソールとコンパイラおよびIDEでエラーが発生しました。エラーを防ぐには、any代わりに署名でキーワードを使用します。

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

編集：

Jonが下で指摘したように、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 implement og onChange（）メソッドを使用しない場合は、valueChangesイベント、ETC によって特定のアイテムの変更をサブスクライブすることもできます。

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

}）;

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

この宣言で使用するために作成されたmarkForCheck（）：

  changeDetection: ChangeDetectionStrategy.OnPush

また、EventEmitterを入力として渡すこともできます。これがベストプラクティスであるかどうかはよくわかりません...

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;
 }
}