Angular のイベントエミッター

1. Angular の EventEmitter とは何ですか
2. Angular での EventEmitter の使用

Angular での EventEmitter と Angular での EventEmitter の適切な使用法を紹介します。また、Angular のある EventEmitter の例も示します。

Angular の EventEmitter とは何ですか

EventEmitter は、emit() メソッドと subscribe() メソッドを使用してコンポーネント間でデータを共有するのに役立つモジュールです。EventEmitter は Observables レイヤーにあり、変更と値を監視し、その EventEmitter インスタンスにサブスクライブされているコンポーネントにデータを送信します。

emit()

emit() は、指定された値を含むイベントを発行する EventEmitter メソッドです。

# angular
emit(value?: A): void

emit() にはパラメータ value が 1つだけあります。

subscribe()

subscribe() は、このインスタンスによって発行されたイベントのハンドラーを登録する EventEmitter メソッドです。

# angular
subscribe(next?: (value: A) => void, error?: (error: any) => void, complete?: () => void) : Subscription

subscribe() には、EventEmitter で値、エラー、または完了通知を渡すために使用できる 3つのオプションのパラメーターがあります。

• next パラメータは、発行されたイベントのカスタムハンドラです。
• error パラメーターは、このエミッターからのエラー通知用のカスタムハンドラーです。
• complete パラメーターは、このエミッターからの完了通知のカスタムハンドラーです。

Angular での EventEmitter の使用

ここでは、完全に理解するための例として EventEmitter を使用します。この例では、コンポーネントの背景色とフォントの色を変更し、その値を他のコンポーネントに表示します。

そこで、まず、app.module.ts ファイルを設定し、モジュールとコンポーネントをインポートします。

# angular
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import { BgChangeComponent } from './bg-change.component';

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent, HelloComponent, BgChangeComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

次に、アプリコンポーネントの html ファイルを設定し、app.component.html ファイルに次のコードを追加します。

# angular
<emitted (touch)="respond()" name="{{ name }}" [color]="color"></emitted>
<p>{{ response }}</p>
<p>{{ color }}</p>
<bg-change (colorChange)="changeColor($event)"></bg-change>

ここでは、EventEmitter である changeColor($event) を使用し、response と color に EventEmitter の値を表示しています。

次に、app.component.ts ファイルを設定し、最初のページが読み込まれたときに表示される name、response、および color 変数の値を設定します。

response の値を変更する関数 respond() を定義します。

また、色の値を設定する changeColor() 関数も定義します。したがって、app.component.ts ファイルは次のようになります。

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 11';

  response = 'Background not changed yet';

  color = 'brown';

  respond() {
    this.response = 'Success';
  }

  changeColor(color) {
    this.color = color;
  }

}

次に、hello.component.ts ファイルを編集して、次のコードを追加します。

# angular
import {
  Component,
  Input,
  ElementRef,
  Renderer2,
  Output,
  EventEmitter,
  OnInit,
  OnChanges,
} from '@angular/core';

@Component({
  selector: 'emitted',
  template: `<h1
  (click)="emit()"
  >{{text}} {{name}}</h1>`,
})
export class HelloComponent implements OnInit, OnChanges {
  @Input() name: string;

  @Input() color = 'brown';

  text = 'It is';

  @Output()
  touch = new EventEmitter<string>();

  constructor(private renderer: Renderer2, private el: ElementRef) {}

  ngOnInit() {
    this.renderer.setStyle(this.el.nativeElement, 'color', this.color);
  }

  ngOnChanges() {
    this.renderer.setStyle(this.el.nativeElement, 'color', this.color);
  }

  emit() {
    this.touch.emit('touched');
  }
}

上記のコンポーネントでは、@component は app.component.html ファイルから emitted タグを取得し、初期化時に色を設定します。ボタンをクリックすると色が変わります。また、ロード時に表示される text を渡します。

次に、新しい bg-change.component.ts ファイルを追加します。次のコードを追加します。

# angular
import {
  Component,
  ViewChild,
  ElementRef,
  Renderer2,
  EventEmitter,
  Output,
} from '@angular/core';

@Component({
  selector: 'bg-change',
  template: `<button 
  (click)="Bgchange()" 
  >{{content}}</button>`,
  styles: [`button { padding: 10px; }`],
})
export class BgChangeComponent {
  body = this.el.nativeElement.ownerDocument.body;

  activateColor = 'white';

  @Output()
  colorChange = new EventEmitter<string>();

  content = 'Change Page Background';

  constructor(private renderer: Renderer2, private el: ElementRef) {}

  Bgchange() {
    this.colorChange.emit(this.activateColor);

    this.activateColor === 'white'
      ? (this.activateColor = 'red')
      : (this.activateColor = 'white');

    this.renderer.setStyle(this.body, 'background', this.activateColor);
  }
}

したがって、出力は次のようになります。