Ereignis-Emitter in Angular

1. Was ist EventEmitter in Angular
2. Verwendung von EventEmitter in Angular

Wir werden EventEmitter in Angular und die richtige Verwendung von EventEmitter in Angular vorstellen. Und wir geben auch ein Beispiel für EventEmitter in Angular.

Was ist EventEmitter in Angular

EventEmitter ist ein Modul, das dabei hilft, Daten zwischen Komponenten mithilfe der Methoden emit() und subscribe() auszutauschen. EventEmitter befindet sich in der Observables-Schicht, die Änderungen und Werte beobachtet und die Daten an die Komponenten ausgibt, die diese EventEmitter-Instanz abonniert haben.

emit()

emit() ist eine EventEmitter-Methode, die ein Ereignis ausgibt, das einen bestimmten Wert enthält.

# angular
emit(value?: A): void

emit() hat nur einen Parameter, value.

subscribe()

subscribe() ist eine EventEmitter-Methode, die Handler für Ereignisse registriert, die von dieser Instanz ausgegeben werden.

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

subscribe() hat drei optionale Parameter, die verwendet werden können, um Werte, Fehler oder Abschlussbenachrichtigungen in EventEmitter zu übergeben.

• Der Parameter next ist ein benutzerdefinierter Handler für ausgegebene Ereignisse.
• Der error-Parameter ist ein benutzerdefinierter Handler für Fehlermeldungen von diesem Emitter.
• Der complete-Parameter ist ein benutzerdefinierter Handler für eine Abschlussbenachrichtigung von diesem Emitter.

Verwendung von EventEmitter in Angular

Jetzt werden wir EventEmitter als Beispiel verwenden, um es vollständig zu verstehen. In diesem Beispiel ändern wir die Hintergrundfarbe und die Schriftfarbe der Komponente und zeigen ihre Werte in anderen Komponenten an.

Also werden wir zuerst unsere Datei app.module.ts einrichten und Module und Komponenten importieren.

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

Jetzt legen wir unsere HTML-Datei für unsere App-Komponente fest und fügen den folgenden Code in die Datei app.component.html ein.

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

Hier haben wir changeColor($event) verwendet, was ein EventEmitter ist, und wir zeigen Werte von EventEmitter in response und color an.

Jetzt legen wir die Datei app.component.ts fest und legen Werte für die Variablen name, response und color fest, die angezeigt werden, wenn die Seite zum ersten Mal geladen wird.

Wir werden eine Funktion respond() definieren, die den Wert der response ändert.

Wir werden auch die Funktion changeColor() definieren, die den Farbwert setzt. Unsere Datei app.component.ts sieht also so aus:

# 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;
  }

}

Jetzt bearbeiten wir unsere Datei hello.component.ts und fügen ihr den folgenden Code hinzu.

# 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');
  }
}

In der obigen Komponente erhält @component das emitted-Tag aus der Datei app.component.html und setzt beim Initialisieren eine Farbe. Wenn auf die Schaltfläche geklickt wird, ändert sich die Farbe. Wir übergeben auch text, der beim Laden angezeigt wird.

Jetzt fügen wir eine neue Datei bg-change.component.ts hinzu. und fügen Sie den folgenden Code hinzu.

# 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);
  }
}

Unsere Ausgabe sieht also wie folgt aus.