@Outputで子コンポーネントから親へ通知する方法

はじめに

Angularでアプリケーションを開発する際、コンポーネント間のデータ通信は避けて通れない重要なトピックです。特に子コンポーネントから親コンポーネントにデータを送信する場合、@Output デコレータが重要な役割を果たします。

この記事では、@Output デコレータの基本的な使い方を解説していきます。

Outputデコレータとは

@Output デコレータは、子コンポーネントから親コンポーネントへイベントを通知するためのAngularの機能です。子コンポーネントで発生したイベントや変更を親コンポーネントに伝えることで、コンポーネント間の連携がスムーズに行えるようになります。

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

Outputの実装手順

ディレクトリ構造（親子関係）

この階層関係を理解することで、@Outputデコレータを使ったイベント通知の流れが明確になります。子コンポーネントで定義されたイベントは、親コンポーネントに伝播し、親コンポーネントでそのイベントをハンドリングすることができます。

src/
└── app/
    ├── app.component.ts        // 親コンポーネント
    ├── app.component.html      // 親コンポーネントのテンプレート
    ├── app.module.ts           
    └── child/                  
        ├── child.component.ts  // 子コンポーネント
        └── child.component.html // 子コンポーネントのテンプレート

子コンポーネントの実装

子コンポーネントでは、@Output デコレータを使ってイベントを定義し、親コンポーネントに通知できるようにします。まず必要なモジュールをインポートし、EventEmitterを使ってイベントを作成します。このイベントは、ボタンクリックなどのアクションが発生したときに発火させることができます。

child.component.ts

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  // @Outputデコレータでイベントを定義
  @Output() addItemEvent = new EventEmitter<string>();

  // イベントを発火するメソッド
  addItem() {
    // emit()メソッドで親コンポーネントにデータを送信
    this.addItemEvent.emit('新しいアイテム');
  }
}

子コンポーネントのHTMLでは、ボタンをクリックしたときに addItem() メソッドを呼び出します。

child.component.html

<div>
  <h2>子コンポーネント</h2>
  <button (click)="addItem()">アイテムを追加</button>
</div>

親コンポーネントの実装

親コンポーネントのHTMLテンプレートでは、子コンポーネントを配置し、addItemEventイベントを親コンポーネントのhandleAddItemメソッドにバインドします。これにより、子コンポーネントからのイベント発火を検知できます。

app.component.html

<div>
  <h1>親コンポーネント</h1>
  
  <!-- 子コンポーネントのイベントをバインド -->
  <app-child (addItemEvent)="handleAddItem($event)"></app-child>
  
  <div *ngIf="items.length > 0">
    <h3>追加されたアイテム:</h3>
    <ul>
      <li *ngFor="let item of items">{{ item }}</li>
    </ul>
  </div>
</div>

親コンポーネントでは、子コンポーネントが送信したイベントを受け取り、そのデータを処理します。handleAddItem メソッドは子コンポーネントから送られてきたデータ（この例では「新しいアイテム」という文字列）を引数として受け取り、それを items 配列に追加します。配列に追加されたアイテムはテンプレート内の *ngFor ディレクティブで画面上に表示されます。

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  items: string[] = [];

  // 子コンポーネントから送信されたデータを処理するメソッド
  handleAddItem(newItem: string) {
    this.items.push(newItem);
    console.log('アイテムが追加されました:', newItem);
  }
}

Outputの動作の流れ

1. イベントの定義
   子コンポーネントで @Output() デコレータを使用して EventEmitter オブジェクトを作成します。
2. イベントの発火
   子コンポーネント内で emit() メソッドを呼び出してイベントを発火し、データを送信します。
3. イベントのバイディング
   親コンポーネントのHTMLで、子コンポーネントのセレクタに(イベント名)="メソッド($event)" の形式でイベントをバインドします。
4. データの受信
   親コンポーネントのメソッドが呼び出され、子コンポーネントから送信されたデータを受け取ります。

おわりに

Angularライフ楽しみましょう〜