目指せ非プログラマー

もう何でもごじゃれ言語

Angular2 で Input と Output で関連付ける(メモ)

メモ程度にさっと

CustomComponent に値を受け渡して変更を取得したい場合

呼び出し側の html

<app-hoge-comp [(hogeArg)]="arg"></app-hoge-comp>

CustomComponent側

_hogeArg: string = null;
@Output() hogeArgChange: EventEmitter<string> = new EventEmitter<string>();

@Input()
set hogeArg(arg: string): void {
  if (this._hogeArg !== arg) {
    this._hogeArg = arg;
    this.hogeArgChange.emit(this._hogeArg);
  }
}

get hogeArg(): string {
  return this._hogeArg;
}

注意点

  • 命名規則
    • Output 側は [Inpout property name]Change とする