Empfangen von mehreren Instanzen von Daten Verhalten jedes Mal, wenn Komponente initialisiert wird

Question

Ich habe einen einfachen Router, wo ich einen Dienst anrufe und die Daten aus dem Verhalten Subject ... Wenn ich zu einer anderen Route und Comeback bekomme ich mehrere empfangen Werte vom Subjekt ... Wie kann ich alle Beobachter eines Subjekts zerstören und ein neues Subjekt schaffen, wann immer ich brauche ...? Hier ist die Plunker Demo http://plnkr.co/edit/OKiljCekSKHO1zJF5MAy?p=preview
Ich plane, die Beobachter eines Subjekts in ngOnDestroy zu zerstören ...

ngOnDestroy(){ 
this.srvc.DestroySubject(); 
} 

Kann jemand bitte sagen Sie mir, wie die Beobachter eines behaviorsubject zu zerstören?

Answer 1

Das Verhalten wird erwartet.

export class Sample1 { 
    constructor(public srvc:HeroService) { 
     this.srvc.Data.subscribe(data=> { 
     console.log(data); 
     }); 
     this.srvc.GetData(); 
    } 
} 

Im Konstruktor Sie srvc.Data und weil Data abonnieren ist ein BehaviorSubject den letzten ausgesendeten Wert zurückgibt. Sie initialisieren Data mit null, daher gibt es zunächst keine Daten.

Dann rufen Sie im Konstruktor this.srvc.GetData() an, dies bewirkt, dass ein Ereignis ausgegeben wird und vom Abonnement empfangen wird (die Zeilen davor).

Wenn Sie weg und zurück navigieren, wird Sample1 erneut initialisiert und der Konstruktor ausgeführt. Die erste Sache ist, dass srvc.Data abonniert wird. und es erhält den letzten ausgegebenen Wert, der Received Data von dem vorherigen Anruf zu GetData() ist (als wir zuerst zu Heroes navigierten).

Das nächste Ding ist der Anruf zu this.srvc.GetData(), der wieder Received Data ausstrahlt und das Abonnement erhält diesen Wert.

Umgehung

es beheben Sie den Anruf this.srvc.GetData(); den Dienst statt wie

@Injectable() 
export class HeroService { 
    Data: BehaviorSubject<RepairOrder> = new BehaviorSubject(null); 

    constructor() { 
    this.GetData(); 
    } 

    GetData(){ 
    this.Data.next('Recieved Data'); 
    } 
    DestroySubject(){ 
    //alert('hi'); 
    } 
} 

Plunker example