Angular 2 でコンポーネント間のデータ共有: Event Emitters と Subject の比較

2024-04-10

Angular 2 の Event Emitters と Subject の比較

Event Emitters は、コンポーネント間の親子関係でイベントを伝達するために使用されます。一方、Subject は、より複雑なイベント伝達やデータ共有に利用できます。

Event Emitters は、Angular のコア機能であり、以下の特徴があります。

シンプル: 使用が簡単で、コンポーネント間の親子関係でイベントを伝達するのに最適です。
軽量: 他の方法と比べてメモリ使用量が少なく、パフォーマンスに優れています。
一方通行: イベントは親コンポーネントから子コンポーネントへ一方通行で伝達されます。

Event Emitters は、以下のコードのように使用できます。

<button (click)="emitEvent()">イベント発行</button>

// 子コンポーネント
@Output() eventEmitter = new EventEmitter();

emitEvent() {
  this.eventEmitter.emit('イベントが発行されました！');
}

<child-component (eventEmitter)="onEvent($event)"></child-component>

// 親コンポーネント
onEvent(event) {
  console.log('イベントを受け取りました:', event);
}

Subject は RxJS の一部であり、以下の特徴があります。

柔軟: イベント伝達やデータ共有に多くの機能を提供します。
双方向: イベントは双方向で伝達することができ、より複雑な通信を実現できます。
マルチキャスト: 複数の購読者がイベントを購読することができ、データ共有に適しています。

// サービス
import { Subject } from 'rxjs';

const subject = new Subject();

// イベント発行
subject.next('イベントが発行されました！');

// イベント購読
subject.subscribe((event) => {
  console.log('イベントを受け取りました:', event);
});

Event Emitters と Subject はそれぞれ異なる役割を持ち、状況に応じて使い分ける必要があります。

Event Emitters: コンポーネント間の親子関係でイベントを伝達する場合
Subject: より複雑なイベント伝達やデータ共有が必要な場合

以下の表は、それぞれの方法の特徴と使用例をまとめたものです。

方法	特徴	使用例
Event Emitters	シンプル、軽量、一方通行	コンポーネント間の親子関係でイベントを伝達
Subject	柔軟、双方向、マルチキャスト	複雑なイベント伝達やデータ共有

Event Emitters

<button (click)="emitEvent()">イベント発行</button>

// 子コンポーネント
@Output() eventEmitter = new EventEmitter();

emitEvent() {
  this.eventEmitter.emit('イベントが発行されました！');
}

<child-component (eventEmitter)="onEvent($event)"></child-component>

// 親コンポーネント
onEvent(event) {
  console.log('イベントを受け取りました:', event);
}

Subject

// サービス
import { Subject } from 'rxjs';

const subject = new Subject();

// イベント発行
subject.next('イベントが発行されました！');

// イベント購読
subject.subscribe((event) => {
  console.log('イベントを受け取りました:', event);
});

Angular 2 でコンポーネント間の通信を行うその他の方法

サービスは、コンポーネント間でデータを共有するために使用できます。サービスはシングルトンとして作成され、すべてのコンポーネントからアクセスできます。

// サービス
export class MyService {
  private data = '初期値';

  getData() {
    return this.data;
  }

  setData(data: string) {
    this.data = data;
  }
}

// コンポーネント
import { MyService } from './my.service';

constructor(private myService: MyService) {}

ngOnInit() {
  const data = this.myService.getData();
  // ...
}

@Input と @Output デコレータは、親コンポーネントと子コンポーネント間でデータを共有するために使用できます。

<child-component [data]="data" (eventEmitter)="onEvent($event)"></child-component>

// 親コンポーネント
export class ParentComponent {
  data = '親コンポーネントのデータ';

  onEvent(event) {
    console.log('イベントを受け取りました:', event);
  }
}

// 子コンポーネント
export class ChildComponent {
  @Input() data;
  @Output() eventEmitter = new EventEmitter();

  emitEvent() {
    this.eventEmitter.emit('イベントが発行されました！');
  }
}

NgRedux は、Redux を Angular で使用するためのライブラリです。Redux は、状態管理のための Elm アーキテクチャに基づいたライブラリです。

import { NgRedux, select } from '@angular-redux/store';

constructor(private ngRedux: NgRedux) {}

ngOnInit() {
  this.ngRedux.select('counter').subscribe((counter) => {
    // ...
  });

  this.ngRedux.dispatch({
    type: 'INCREMENT_COUNTER'
  });
}

ルーティングを使用して、異なるコンポーネント間を移動し、データを伝達することができます。

<a routerLink="/detail/:id">詳細ページへ</a>

// コンポーネント
export class DetailComponent {
  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    const id = this.route.snapshot.params['id'];
    // ...
  }
}