angularでコンポーネント間のデータ変更検知 親 -> 子

angularで親コンポーネントから子コンポーネントへのやりとりは@Inputを使います

@Inputで受け取った値の変更を検知して何か処理をする場合などはngOnChangesのライフサイクルフックを使います

ngOnChangesで変更された値を使って処理をしていたのですが使っていくうちに下記のようになんだか不便だなと思うことがありました

• どのパラメータが変更されたのかチェックが必要
• やりとりする変数が増えれば増えるほどngOnChangesに処理が集まってしまう

最近setterを使っても変更検知ができることを知ったので実際にやってみました

ngOnChange

複数の値を@Inputで受け取っている場合、どの変数が変更されたのかといったチェックを行わないとエラーになってしまうことが…..

ngOnChanges(changes: SimpleChanges){
  // 他の変数が変更され場合このチェックがないとエラーになってしまう
  if(changes.param2){
    changes.param2.currentValue > 5;
  }
}

setter

setで値を受け取った値を使って何か処理をする(ngOnChangesと同じような処理)といったことができます

まとめ

setterを使って処理をする方がどの変数に対して処理を行うかが明示的にわかるようになるのでいいですね

ngOnChangesを使っていると初期化時も処理が走るので何かやろうとするとだいたい対象の変数のnullチェックをしないといけない感じになってしまっていたのでsetterを使う方式の方が良いなと思いました

地味ですがこういうちょっとした積み重ねがあとあと効いてくると信じて日々改善していきたいですね