Achten Sie auf Änderungen in Angular 2-Dienste-Funktion

Question

Ich habe einen Dienst mit dem Namen HomeService und in diesem Dienst bin ich Einstellung und bekomme einige Daten, die gut funktioniert. Hier ist der Code für meinen Service.

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

@Injectable() 
export class HomeService { 

name:string; 

constructor() { } 

setParams(val) { 
     this.name = val; 
} 
getParams() { 
    return this.name; 
} 

} 

Ich gründe params in einer Komponente A und es in Komponente B bekommen. Was ich will, ist zu beobachten, die getParams() für die Änderung in der zweiten Komponente. Ich bekomme den Parameter Wert in Komponente A, in dem ich es setze, aber ich konnte diesen Wert in Komponente B nicht erhalten. Bedeutet in Komponente B seine nicht auf Änderungen achten.

Answer 1

Um die Änderungen der Namenseigenschaft zu verfolgen, müssen Sie Observables verwenden. Ändern Sie Ihren Service wie folgt.

Homeservice:

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

@Injectable() 
export class HomeService { 

    private nameSource = new Subject<any>(); 

    name$ = this.nameSource.asObservable(); 

    setParams(val) { 
     this.nameSource.next(val); 
    } 

} 

In Ihrer Komponente B, in dem Sie den Namen geändert werden soll, ist es immer auf den Namen in den Dienst abonniert halten. Wenn der Name im Service geändert wird (wenn Sie den Namen für Komponente A festlegen), können Sie die Änderung verfolgen und Komponente B wird aktualisiert.

ComponentB:

import { Component, OnInit, OnDestroy} from '@angular/core'; 
import 'rxjs/add/operator/takeWhile'; 
import { HomeService } from '[add path of home service here]'; 

export class ComponentBComponent implements OnInit, OnDestroy{ 

    private alive: boolean = true; 
    private name: string; 

    constructor(
     private homeService: HomeService; 
    ) { 
     homeService.name$.takeWhile(() => this.alive).subscribe(
      name=> { 
       this.name = name; 
     }); 

    } 

    ngOnInit() { 
     // Whatever to happen OnInit 
    } 

    ngOnDestroy() { 
     this.alive = false; 
    } 

} 

Bitte beachten Sie, dass die takeWhile() und alive-prevent memory leaks.

verwendet werden, von was auch immer der Ort, den Sie den Namen Home-Dienst eingestellt,

this.homeService.setParams(name); 

Diese Lösung sollte für Sie arbeiten.

Answer 2

Überlegen Sie, ob Sie den Service mit dem Abonnement abonnieren möchten. In Komponenten müssen Sie abonnieren observable Variable, die auf Quelle basiert, und wann immer Sie next Methode auf Quelle aufrufen, das Observable feuert und Komponenten, die dieses Observable abonnieren haben, erhalten neue/aktualisierte Wert und innerhalb subscribe Callback können Sie definieren, was würden Sie mach mit diesem Wert. Für weitere Informationen überprüfen Sie diese article.