コンポーネントを扱う際に、他のコンポーネントに何かが起こったことを通知しなければならない場合があります。ボタンがクリックされた、リストに項目が追加/削除された、またはその他の重要な更新が行われたなどです。このようなシナリオでは、コンポーネントは親コンポーネントと通信する必要があります。
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
インスタンスと同じタイプのイベントを生成します。
さあ、実際に試してみましょう。次のタスクに従ってコードを完成させてください。
-
@Output
プロパティを追加するaddItemEvent
という出力プロパティを追加することでchild.component.ts
を更新します。EventEmitter
のタイプをstring
に設定してください。 -
addItem
メソッドを完成させるchild.component.ts
でaddItem
メソッドを更新します。次のコードをロジックとして使用してください。child.component.ts
addItem() { this.addItemEvent.emit('🐢');}
-
AppComponent
テンプレートを更新するapp.component.ts
でテンプレートを更新して、次のようなコードを追加することで、発生したイベントを購読します。<app-child (addItemEvent)="addItem($event)" />
これで、「Add Item」ボタンをクリックするたびに、リストに新しいアイテムが追加されます。
やりましたね、これでコンポーネントの基本を理解できました。素晴らしい👏
さらに学び続けることで、Angularの優れた機能をさらに活用できます。