Angularでの親コンポーネントへのデータ渡し

子コンポーネントから親コンポーネントへデータを渡すことができます。 これは、特別なオブジェクトEventEmitterとメソッドemitを使用してイベントを発行することで行われます。 子コンポーネントは、いくつかのデータをイベントと共に渡すイベントを発行し、 親コンポーネントはそのイベントをキャッチして、親コンポーネントからのデータを取得します。

実際に試してみましょう。そのためには、いくつかの手順を踏む必要があります。 まず、子コンポーネントにデコレータ@OutputとクラスEventEmitterをインポートします：

app/user/user.component.tsimport { Component, Output, EventEmitter } from '@angular/core';

次に、子クラスにプロパティonDataを作成し、その値を文字列を含む新しいオブジェクトEventEmitterに設定します：

app/user/user.component.tsexport class UserComponent {
  @Output()
  public onData = new EventEmitter<string>();
}

次に、メソッドsendを作成し、その呼び出しで指定されたテキストと共にイベントonDataを親コンポーネントに発行します：

app/user/user.component.tsexport class UserComponent {
  @Output()
  public onData = new EventEmitter<string>();
  
  send() {
    this.onData.emit('xxx');
  }
}

子コンポーネントのテンプレートにボタンを作成し、クリックするとメソッドsendが呼び出されるようにします：

app/user/user.component.html<button (click)="send()">
  send data
</button>

親コンポーネントにメソッドonDataを作成します。このメソッドは、子コンポーネントから対応するイベントが発行されたときに自動的に呼び出され、メソッドのパラメータには渡されたデータが入ります：

app/app.component.tsexport class AppComponent {
  public onData(data: string) {
    console.log(data);
  }
}

親コンポーネントのテンプレートで、子コンポーネントタグにイベントをバインドします：

app/app.component.html<app-user (onData)="onData($event)"></app-user>