Angular: オブジェクト、サービス、Subject、NgRxを使ってデータを共有する

AngularでEventEmitterに2つのパラメータを渡す方法

オブジェクトとして渡す

最も簡単な方法は、2つのパラメータをオブジェクトとしてまとめ、EventEmitterに渡す方法です。

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

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
})
export class MyComponent implements OnInit {
  public myEventEmitter = new EventEmitter<object>();

  constructor() {}

  ngOnInit(): void {}

  public emitEvent(): void {
    const data = {
      param1: 'value1',
      param2: 'value2',
    };

    this.myEventEmitter.emit(data);
  }
}

上記コードでは、MyComponentクラスにmyEventEmitterという名前のEventEmitterを定義しています。emitEventメソッドでは、param1とparam2という2つのパラメータを持つオブジェクトを作成し、myEventEmitterに渡しています。

受信側では、以下のコードのように、EventEmitterからemitされるオブジェクトを受け取ることができます。

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

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

  ngOnInit(): void {}

  public onEvent(data: object): void {
    console.log(data['param1']); // 'value1'
    console.log(data['param2']); // 'value2'
  }
}

上記コードでは、MyOtherComponentクラスでmyEventEmitterからemitされるイベントをonEventメソッドで受け取っています。onEventメソッドでは、イベントオブジェクトからparam1とparam2パラメータの値を出力しています。

複数のEventEmitterを使用する

2つのパラメータをそれぞれ個別のEventEmitterに渡す方法もあります。

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

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
})
export class MyComponent implements OnInit {
  public param1EventEmitter = new EventEmitter<string>();
  public param2EventEmitter = new EventEmitter<string>();

  constructor() {}

  ngOnInit(): void {}

  public emitEvent(): void {
    this.param1EventEmitter.emit('value1');
    this.param2EventEmitter.emit('value2');
  }
}

上記コードでは、MyComponentクラスにparam1EventEmitterとparam2EventEmitterという2つのEventEmitterを定義しています。emitEventメソッドでは、それぞれのパラメータを個別にEventEmitterにemitしています。

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

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

  ngOnInit(): void {}

  public onParam1Event(param1: string): void {
    console.log(param1); // 'value1'
  }

  public onParam2Event(param2: string): void {
    console.log(param2); // 'value2'
  }
}

上記コードでは、MyOtherComponentクラスでparam1EventEmitterとparam2EventEmitterからemitされるイベントをそれぞれonParam1EventとonParam2Eventメソッドで受け取っています。

カスタムイベントクラスを使用する

より複雑なデータ構造を渡したい場合は、カスタムイベントクラスを作成する方法もあります。

export class MyCustomEvent {
  constructor(public param1: string, public param2: string) {}
}

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

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
})
export class MyComponent implements OnInit {
  public myEventEmitter = new EventEmitter<

オブジェクトとして渡す

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

my-component.component.ts

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

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
})
export class MyComponent implements OnInit {
  public myEventEmitter = new EventEmitter<object>();

  constructor() {}

  ngOnInit(): void {}

  public emitEvent(): void {
    const data = {
      param1: 'value1',
      param2: 'value2',
    };

    this.myEventEmitter.emit(data);
  }
}

<p>パラメータ1: {{ data.param1 }}</p>
<p>パラメータ2: {{ data.param2 }}</p>

<my-component (myEventEmitter)="onEvent($event)"></my-component>

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

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

  ngOnInit(): void {}

  public onEvent(data: object): void {
    console.log(data['param1']); // 'value1'
    console.log(data['param2']); // 'value2'
  }
}

複数のEventEmitterを使用する

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

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

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
})
export class MyComponent implements OnInit {
  public param1EventEmitter = new EventEmitter<string>();
  public param2EventEmitter = new EventEmitter<string>();

  constructor() {}

  ngOnInit(): void {}

  public emitEvent(): void {
    this.param1EventEmitter.emit('value1');
    this.param2EventEmitter.emit('value2');
  }
}

<p>パラメータ1: {{ param1 }}</p>
<p>パラメータ2: {{ param2 }}</p>

<my-component (param1EventEmitter)="onParam1Event($event)" (param2EventEmitter)="onParam2Event($event)"></my-component>

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

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

  ngOnInit(): void {}

  public onParam1Event(param1: string): void {
    console.log(param1); // 'value1'
  }

  public onParam2Event(param2: string): void {
    console.log(param2); // 'value2'
  }
}

カスタムイベントクラスを使用する

my-custom-event.ts

export class MyCustomEvent {
  constructor(public param1: string, public param2: string) {}
}

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

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
})
export class MyComponent implements OnInit {
  public myEventEmitter = new EventEmitter<MyCustomEvent>();

  constructor() {}

  ngOnInit(): void {}

  public emitEvent(): void {
    const event = new MyCustomEvent('value1', 'value2');
    this.myEventEmitter.emit(event);
  }
}

<p>パラメータ1: {{ event.param1 }}</p>

AngularでEventEmitterに2つのパラメータを渡す方法

サービスを使用して、コンポーネント間でデータを共有する方法があります。

my-service.ts

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

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

  private data: object;

  public setData(param1: string, param2: string): void {
    this.data = {
      param1,
      param2,
    };
  }

  public getData(): object {
    return this.data;
  }
}

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 {}

  public emitEvent(): void {
    this.myService.setData('value1', 'value2');
  }
}

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

@Component({
  selector: 'my-other-component',
  templateUrl: './my-other-component.component.html',
})
export class MyOtherComponent implements OnInit {
  constructor(private myService: MyService) {}

  ngOnInit(): void {}

  public getData(): object {
    return this.myService.getData();
  }
}

Subjectを使用する

Subjectは、複数のコンポーネント間でデータを共有するためのRxJSの機能です。

import { Component, OnInit } from '@angular/core';
import { Subject } from 'rxjs';

@Component({
  selector: 'my-component',
  templateUrl: './my-component.component.html',
})
export class MyComponent implements OnInit {
  public mySubject = new Subject<object>();

  constructor() {}

  ngOnInit(): void {}

  public emitEvent(): void {
    const data = {
      param1: 'value1',
      param2: 'value2',
    };

    this.mySubject.next(data);
  }
}

import { Component, OnInit } from '@angular/core';
import { Subject } from 'rxjs';

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

  ngOnInit(): void {}

  public getData(): Subject<object> {
    return this.mySubject;
  }
}

NgRxを使用する

NgRxは、Angularアプリケーションで状態管理を行うためのライブラリです。

import { Component, OnInit } from '@angular/core';
import { Store } from '@ngrx/store';

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

  ngOnInit(): void {}

  public emitEvent(): void {
    const data = {
      param1: 'value1',
      param2: 'value2',
    };

    this.store.dispatch(new MyAction(data));
  }
}

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