コンポーネント間の連携

このレッスンでは、Angularでコンポーネント同士がどのように通信するか、特に親コンポーネントと子コンポーネントの間の連携について学びます。

コンポーネント間でデータを共有する必要が生じることはよくあります。親コンポーネントは、入力プロパティを使って子コンポーネントにデータを渡せます。

@Input()デコレーターを使って、親コンポーネントからデータを受け取ります。

@Input() userData: string;

親コンポーネントのテンプレートで、プロパティバインディングを使ってデータを渡します。

<app-child [userData]="parentData"></app-child>

子コンポーネントは、@Output()デコレーターを使ったイベントによって、親コンポーネントに情報を伝えます。

イベントエミッターを作成して、子コンポーネントから親コンポーネントにデータを送信します。

@Output() dataEvent = new EventEmitter<string>();

子コンポーネントからイベントを発行します。

sendData() {
  this.dataEvent.emit('Hello from Child');
}

親コンポーネントのテンプレートで、発行されたイベントを処理します。

<app-child (dataEvent)="handleEvent($event)"></app-child>

Angularでコンポーネントが入力と出力を通じて連携する方法を理解できました。練習を続けてください。