実は簡単なAngularの双方向( two way )バインディング

● 実は簡単なAngularの双方向( two way )バインディング

@Input() value を作ってるならば
@Output() valueChange = new EventEmitter(); と、同名+ChangeのEventEmitterを作るだけでよい。
そうすると、[(value)] で双方向バインディング出来ます。

引用: https://qiita.com/kohashi/items/bcbcc9cbeaee9498e4fe

補足

バインディングしている変数やクラスに「変更があったとき」 @Output を経由して 変更が適用されるので、
バインディングしている変数へ「値を再代入して初期化」した場合には @Output を経由しないので注意が必要です。
// × 変更が適用されない
this.value = new MyClass();

// 〇 初期化するメソッドを自作して、メソッドを実行する
this.value.deleteAll();

● 自作コンポーネントでの双方向バインディングの方法

自作コンポーネント
@Inputでプロパティを定義する。
@OutputでEventEmitterを定義する。EventEmitterの型は@Inputの型と同じものとする。
@Output側のプロパティ名を@Inputのプロパティ名 + Changeにする。
例)@Inputがvalueだった場合、@OutputはvalueChange
自作コンポーネント内の処理で@Output側のEventEmitter.emit処理を実行することで、値が呼び出し側に伝搬する。
呼び出し側コンポーネント
[(双方向対象のプロパティ)]="呼び出し側プロパティ"のように呼び出す。

引用: https://kakkoyakakko2.hatenablog.com/entry/2018/08/24/003000

No.1910
12/17 08:59

edit