コンポーネント出力プロパティ

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

Angularは、output() 関数を使用してこのタイプの動作を可能にします。

このアクティビティでは、output() 関数を使用してコンポーネント間で通信する方法を学びます。

子コンポーネントから親コンポーネントへの通信パスを作成するには、クラスプロパティにoutput() 関数を使用して初期化します。

@Component({...})class Child {  incrementCountEvent = output<number>();}

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

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

emit関数は、outputで定義した型と同じ型のイベントを発生させます。

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

1. output()プロパティを追加する

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

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

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

   child.ts

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

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

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

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

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

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

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