@Outputを使ったコンポーネント間の通信

コンポーネントを扱う際に、他のコンポーネントに何かが起こったことを通知しなければならない場合があります。ボタンがクリックされた、リストに項目が追加/削除された、またはその他の重要な更新が行われたなどです。このようなシナリオでは、コンポーネントは親コンポーネントと通信する必要があります。

Angularは、@Outputデコレーターを使用してこのタイプの動作を可能にします。

このアクティビティでは、@OutputデコレーターとEventEmitterを使用してコンポーネント間で通信する方法を学びます。

子コンポーネントから親コンポーネントへの通信パスを作成するには、クラスプロパティに@Outputデコレーターを使用し、EventEmitterタイプの値を割り当てます。

child.component.ts

      
@Component({...})class ChildComponent {    @Output() incrementCountEvent = new EventEmitter<number>();}

これで、コンポーネントは、親コンポーネントがリスンできるイベントを生成できます。emitメソッドを呼び出すことでイベントをトリガーします。

child.component.ts

      
class ChildComponent {    ...    onClick() {        this.count++;        this.incrementCountEvent.emit(this.count);    }}

emit関数は、EventEmitterインスタンスと同じタイプのイベントを生成します。

さあ、実際に試してみましょう。次のタスクに従ってコードを完成させてください。

  1. @Outputプロパティを追加する

    addItemEventという出力プロパティを追加することでchild.component.tsを更新します。EventEmitterのタイプをstringに設定してください。

  2. addItemメソッドを完成させる

    child.component.tsでaddItemメソッドを更新します。次のコードをロジックとして使用してください。

    child.component.ts

          
    addItem() {  this.addItemEvent.emit('🐢');}

  3. AppComponentテンプレートを更新する

    app.component.tsでテンプレートを更新して、次のようなコードを追加することで、発生したイベントを購読します。

          
    <app-child (addItemEvent)="addItem($event)" />

    これで、「Add Item」ボタンをクリックするたびに、リストに新しいアイテムが追加されます。

やりましたね、これでコンポーネントの基本を理解できました。素晴らしい👏

さらに学び続けることで、Angularの優れた機能をさらに活用できます。