Angular 2におけるEventEmitter.next()とEventEmitter.emit()の違い

Angular 2における EventEmitter.next()とEventEmitter.emit()の違い

これらの2つのメソッドは一見似ていますが、いくつかの重要な違いがあります。

呼び出し元

• emit(): コンポーネントの外部から呼び出す

next()はコンポーネントの内部からイベントを発行するために使用されます。一方、emit()はコンポーネントの外部からイベントを発行するために使用されます。

戻り値

• emit(): イベントリスナーの数を返す
• next(): 戻り値なし

next()はイベントを発行するだけで、何も返しません。一方、emit()はイベントリスナーの数（イベントを購読しているコンポーネントの数）を返します。

イベント処理

• emit(): イベントリスナーは非同期的に呼び出される

next()で発行されたイベントは、イベントリスナーが同期的に呼び出されます。一方、emit()で発行されたイベントは、イベントリスナーが非同期的に呼び出されます。

使用例

next()

• データ更新など、頻繁に発生するイベントの発行
• コンポーネント内の状態変化を他のコンポーネントに通知

emit()

• ボタンクリックなど、ユーザー操作によって発生するイベントの発行
• コンポーネント間のデータ送信

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

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
})
export class MyComponent implements OnInit {

  @Output()
  public counterChange: EventEmitter<number> = new EventEmitter<number>();

  private counter: number = 0;

  constructor() { }

  ngOnInit(): void {
  }

  public incrementCounter(): void {
    this.counter++;
    // コンポーネント内の状態変化を他のコンポーネントに通知
    this.counterChange.next(this.counter);
  }

  public emitCounter(): void {
    // コンポーネント間のデータ送信
    this.counterChange.emit(this.counter);
  }
}

HTML

<button (click)="incrementCounter()">カウンターを増加</button>
<button (click)="emitCounter()">カウンターを送信</button>

<p>カウンター: {{ counter }}</p>

このコードでは、MyComponentというコンポーネントにcounterChangeというEventEmitterプロパティがあります。

• emitCounter()メソッドは、counter変数をcounterChangeイベントとして発行します。このイベントは、emit()メソッドを使って非同期的に呼び出されます。

サービス

サービスは、コンポーネント間でデータを共有するために使用できるオブジェクトです。サービスはシングルトンとして作成されるため、コンポーネント間で同じデータインスタンスを共有することができます。

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

@Injectable({
  providedIn: 'root'
})
export class MyService {

  private counter: number = 0;

  public getCounter(): number {
    return this.counter;
  }

  public setCounter(value: number): void {
    this.counter = value;
  }
}

コンポーネント

import { Component, OnInit } from '@angular/core';
import { MyService } from './my.service';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
})
export class MyComponent implements OnInit {

  constructor(private myService: MyService) { }

  ngOnInit(): void {
    this.counter = this.myService.getCounter();
  }

  public incrementCounter(): void {
    this.myService.setCounter(this.counter + 1);
  }
}

Input/Output バインディング

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

<my-component [counter]="counter"></my-component>

<p>カウンター: {{ counter }}</p>

<button (click)="incrementCounter()">カウンターを増加</button>

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
})
export class MyComponent implements OnInit {

  @Input()
  public counter: number;

  public incrementCounter(): void {
    this.counter++;
  }
}

ローカルストレージ

ローカルストレージは、ブラウザにデータを保存するために使用できます。コンポーネント間でデータを共有するためにローカルストレージを使用することができます。

localStorage.setItem('counter', this.counter);

const counter = localStorage.getItem('counter');

RxJS

RxJSは、非同期処理を扱うためのライブラリです。RxJSを使用して、コンポーネント間でイベントを発行/購読することができます。

import { Observable } from 'rxjs';

const counter$: Observable<number> = Observable.interval(1000)
  .map(count => count + 1);

counter$.subscribe(counter => {
  // カウンターの更新処理
});