input（）へのデータのプッシュが検出されない：角度4

Question

私は、UIに表示したいデータを含む 'data'というオブジェクトを持つ親コンポーネントを持っています。データがテーブルに表示され、そのテーブルを含む子コンポーネントが作成されました。したがって、テーブルコンポーネントを呼び出すときに、データを@Input（）として渡しています。表示の上に

//親componeneテンプレート

<display-data [data]='data'></display-data> 

、私はこのデータプロパティを変更し、私の親コンポーネントで2つのメソッドを持っています。私は角度入力を使用しているので）（

addNewData(newData: Array) { 
    this.data.push(...newData); 
} 

、：それの一つは、再割り当て、このような何かを持つデータ配列：

setNewData() { 
    this.data = this.response.content; 
} 

、別の方法では、新しいデータが既に存在するデータをプッシュ私は親コンポーネントのデータオブジェクトを変更する（再割り当てまたはデータを追加する）たびに、子コンポーネントのデータプロパティが即座に更新され、新しいデータがUIに表示されることを前提としています。それは期待どおりに動作します。 しかし、Angularのライフサイクルフック「ngOnChanges」を見てみると、再割り当てが行われたときにのみ呼び出され、データオブジェクトで新しいデータをプッシュしたときには呼び出されないことに気付きました。

これはngOnChangesの仕組みですか？子コンポーネント内のデータが変更されるたびにメソッドを呼び出す必要があるためです。

Answer 1

はい、これはngOnChangesが動作する方法とまったく同じです。

ngOnChangesは、再割り当てが発生したときにのみ呼び出されます。

このデータが変更されるたびにメソッドを実行する場合は、次の操作を実行できます。

1. メンバ変数のデータと、この変数を返す関数を持つサービスを作成します。
2. 親コンポーネントは、このサービスのメソッドを使用して、この変数をフェッチして更新できます。
3. サービスには、子コンポーネントによってサブスクライブできるイベントエミッタオブジェクトも含まれています。
4. したがって、親コンポーネントがサービスメソッドを呼び出してデータの値を更新するときはいつでも、それを行うことができ、EventEmitterオブジェクトでも放出できます。

何らかのコードが必要な場合は教えてください。しかし、あなたが自分でコード化すれば、多くのことを理解するでしょう。