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。

subscribe()

subscribe() 是一個 EventEmitter 方法，它為該例項發出的事件註冊處理程式。

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

subscribe() 具有三個可選引數，可用於在 EventEmitter 中傳遞值、錯誤或完成通知。

• 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>

這裡我們使用了 changeColor($event)，它是一個 EventEmitter，我們在 response 和 color 中顯示來自 EventEmitter 的值。

現在我們將設定 app.component.ts 檔案並設定第一次載入頁面時顯示的 name、response 和 color 變數的值。

我們將定義一個函式 respond()，它將改變 response 的值。

我們還將定義 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);
  }
}

所以我們的輸出將如下所示。