BehaviourSubject gibt den alten Wert zurück, nachdem er über zwei Geschwisterkomponenten aktualisiert wurde

Question

Ich habe zwei Geschwisterkomponenten, eine zum Filtern einer Liste von Videos und eine zum Anzeigen der Liste von Videos.

Um diese beiden Komponenten zu kommunizieren, habe ich einen Service gemacht. Der Code des Service ist wie folgt:

import {Injectable} from '@angular/core'; 
import {Video} from '../../assets/video'; 
import { BehaviorSubject} from 'rxjs/BehaviorSubject'; 

declare var window: any; 

@Injectable() 
export class VideoService { 

    videoArray: Video[]; 
    private filteredVideoArray = new BehaviorSubject<Video[]>(window.videos); 

    currentMessage = this.filteredVideoArray.asObservable(); 

    constructor() { 
    this.videoArray = window.videos; 
    } 

    getVideos(): Video[] { 
    return this.videoArray; 
    } 

    updateFilteredVideos(message: Video[]) { 
    this.filteredVideoArray.next(message); 
    console.log(this.filteredVideoArray.getValue()); 

    } 

    getFilteredVideos(): Video[] { 
    console.log(this.filteredVideoArray.getValue()); 
    return this.filteredVideoArray.getValue(); 
    } 
} 

Beide Komponenten abonnieren Sie den BehaviourSubject-Objekt:

ngOnInit() { 
this.videoService.currentMessage.subscribe(message => this.videoArray = message); 

}

Und wenn updateFilteredVideos() aufgerufen wird es immer druckt den entsprechenden Wert, aber Wenn getFilteredVideos() aufgerufen wird, gibt es immer den ursprünglichen Wert zurück. Nicht der aktualisierte Wert.

Answer 1

Ich glaube, das ist wegen der Angular 4 DI Natur. Wenn Sie Ihren Dienst in 2 Komponenten injizieren, ohne ihn in die übergeordnete Komponente in Ihrem Komponentenbaum zu injizieren, erhalten Sie 2 verschiedene Instanzen des Dienstes. Mein Vorschlag ist in Ihrer Root-Komponente Konstruktor tun:

constructor(private videoService: VideoService) {} 

Sie brauchen nichts mit diesem Dienst zu tun, außer es injiziert wird. Sie können mehr über die Ursache dieses Problems hier lesen: https://angular.io/guide/hierarchical-dependency-injection