Winkel 5 abonnieren und abbestellen Beobachten

Verhalten Thema Abonnieren & Abmelden Observablen

Verhalten Fächer sind sehr nützlich beim Austausch von Daten in mehrere Komponenten. Sie können abonnieren Sie so oft wie Sie wollen. Auch Abmelden können Sie es mit der unsubscribe-Methode.

Nehmen wir die oben genannten service und abonnieren Sie diesen Dienst, um Informationen zu bekommen:

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

@Injectable()
export class DataService {
    public source = new BehaviorSubject<any>(' ');
    data = this.source.asObservable();
    constructor() { }
    update(values: any) {
        this.source.next(values);
    }
}

Hier, ich habe erklärt, ein Verhalten, unterliegen mit den ersten Wert ein leerer string. Denken Sie daran, dass Sie brauchen, um geben, eine Standard-Wert, um Ihr Verhalten unterliegt, ob es eine leere Zeichenkette oder eine beliebige Anzahl. Danach habe ich initialisiert habe eine beobachtbare Daten mit asObservable() Methode. Und endlich habe ich eine Methode, welche updates das Verhalten unterliegen Quelle Wert mit next() Methode.

Nun ich werde diesen Service in unser Komponente, um Daten aus unserem Verhalten unterliegen.

subscription: any;

constructor( private dataSvc: DataService ) {
    this.subscription = this.dataSvc.data.subscribe(
        data => console.log('Data:', data),
        err => console.log(err),
        () => console.log('complete')
    );
}

Hier habe ich injiziert, unsere DataService zu unserer Komponente und ich habe erstellt eine Instanz der DataService dataSvc. Ich habe verwendet, dataSvc, rufen Sie unsere Daten beobachten und abonnieren Sie, dass Daten, die beobachtbaren Daten zu erhalten von unser Verhalten unterliegt. Also die Ausgabe, die ich in die browser-Konsole mit dem folgenden code ist:

Data: 

So, ich bin diese leere, weil ich verwendet haben ein leerer string als default-Wert für mein Verhalten unterliegen.

Nun um den Wert zu aktualisieren Verhalten Thema, ich habe die update-Methode der dataSvc-service die Aktualisierung der Wert der BehaviorSubject für die leere Zeichenkette, um den neuen Wert ein.

//Insert this before subscribing the data observable
this.dataSvc.update('abc');

//Output in the console.
Data: abc

Nun der Wert aktualisiert wurde der von leeren Zeichenfolge abc. Und dies spiegelt sich in jeder Komponente, wo abonnieren dieses BehaviorSubject.

So was, wenn ich will zum abbestellen des Abonnements. So haben wir zum initialisieren von Abonnements als

subscription: ISubscription;

und dann, Wann immer wir wollen, abbestellen, wir rufen unsubscribe-Methode ISubscription wie diese

this.subscription.unsubscribe();

So der vollständige code für eine bestimmte Komponente wird so sein:

import { Component } from '@angular/core';
import { DataService } from "./data.service";
import {ISubscription} from "rxjs/Subscription";


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {

  subscription: ISubscription;

  constructor( private dataSvc: DataService ) {
    this.subscription = this.dataSvc.data.subscribe(
      data => console.log('Data:', data),
      err => console.log(err),
      () => console.log('complete')
    );
    this.dataSvc.update('abc');
    this.subscription.unsubscribe();
  }
}

InformationsquelleAutor Deepak K