Angular Subscribe()-Methode

Wir werden die Methode subscribe() von Angular vorstellen und in unserer Anwendung verwenden.

Angular Subscribe

Subscribe() ist eine Methode in Angular, die den observer mit observable Ereignissen verbindet. Immer wenn eine Änderung an diesen Observablen vorgenommen wird, wird ein Code ausgeführt und beobachtet die Ergebnisse oder Änderungen mit der Methode Subscribe. Subscribe() ist eine Methode aus der rxjs-Bibliothek, die intern von Angular verwendet wird.

Newsletter sind heute der häufigste Bestandteil von Websites. Stellen wir sie uns als beobachtbares Ereignis vor und wir als Beobachter. Wenn wir unser E-Mail-zu-Newsletter-Formular auf einer beliebigen Website eingeben, abonnieren wir ein beobachtbares Ereignis. Immer wenn ein neuer Newsletter von dieser Website veröffentlicht wird, erhalten wir ihn in unserer E-Mail, bis wir uns von dieser Veranstaltung abmelden.

In ähnlicher Weise abonnieren wir diese Funktion, wenn wir eine Funktion haben, die wir in einer Angular-Anwendung beobachten möchten. Wann immer eine Änderung an dieser Funktion vorgenommen wird, können wir die Änderung mit der Methode subscribe() sehen.

Subscribe() nimmt drei Methoden als Parameter: next, error und complete.

1. Mit der next-Methode können wir jeden vom Observable ausgegebenen Wert übergeben.
2. Mit der error-Methode können wir jeden Fehler weitergeben, der irgendwo im Stream auftritt.
3. Mit der complete-Methode können wir Werte übergeben, sobald das gesamte beobachtbare Ereignis abgeschlossen ist.

Gehen wir ein Beispiel durch, um subscribe() im Detail zu verstehen. Zuerst erstellen wir eine neue Servicedatei als subscribe.service.ts, in der wir die Funktion assignValue() erstellen, die mit der Methode next einen Wert an den Beobachter übergibt.

Unser Code in subscribe.service.ts sieht so aus.

# angular
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class SubscribeService {
  assignValue() {
    const SubscribeObservable = new Observable((observer) => {
      observer.next('Angular');
    });
    return SubscribeObservable;
  }
}

Als nächstes importieren wir diesen Dienst in app.module.ts und definieren ihn in @NgModule als Anbieter.

# 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 { SubscribeService } from './subscribe.service';

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

Im nächsten Schritt in der Datei app.component.ts erstellen wir einen Konstruktor für unseren Dienst und eine Funktion, die vom Beobachter einen Wert erhält. Und vergessen Sie nicht, unseren Dienst in die Datei app.component.ts zu importieren.

# angular
import { Component, VERSION } from '@angular/core';
import { SubscribeService } from './subscribe.service';

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

  constructor(private SubscribeService: SubscribeService) {}

  ngClick() {
    this.SubscribeService.assignValue().subscribe((result) => {
      console.log(result);
    });
  }
}

Jetzt erstellen wir eine Vorlage in app.component.html.

# angular
<hello name="{{ name }}"></hello>
<button (click)="ngClick()">Click Here to see result</button>

Ausgabe: