我有两个兄弟组件,一个用于过滤视频列表,另一个用于显示视频列表。
为了帮助这两个组件进行通信,我做了一个服务。该服务的代码如下:
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();
}
}这两个组件都使用以下方法订阅BehaviourSubject对象:
ngOnInit() {
this.videoService.currentMessage.subscribe(message => this.videoArray = message);}
当调用updateFilteredVideos()时,它总是打印适当的值,但是当调用getFilteredVideos()时,它总是返回原始值。而不是更新的值。
发布于 2017-10-31 01:42:32
我相信这是因为角4DI的性质。如果您将您的服务注入到两个组件中,而没有将它注入组件树中的父组件中,那么您将得到服务的两个不同实例。我的建议是在根组件构造函数中执行:
constructor(private videoService: VideoService) {}除了注入服务之外,您不需要对此服务做任何事情。您可以在这里阅读更多有关此问题根源的文章:https://angular.io/guide/hierarchical-dependency-injection
https://stackoverflow.com/questions/47025209
复制相似问题