首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >跨两个同级组件更新后返回旧值的BehaviourSubject

跨两个同级组件更新后返回旧值的BehaviourSubject
EN

Stack Overflow用户
提问于 2017-10-30 22:32:12
回答 1查看 60关注 0票数 0

我有两个兄弟组件,一个用于过滤视频列表,另一个用于显示视频列表。

为了帮助这两个组件进行通信,我做了一个服务。该服务的代码如下:

代码语言:javascript
复制
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对象:

代码语言:javascript
复制
  ngOnInit() {
this.videoService.currentMessage.subscribe(message => this.videoArray = message);

}

当调用updateFilteredVideos()时,它总是打印适当的值,但是当调用getFilteredVideos()时,它总是返回原始值。而不是更新的值。

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-10-31 01:42:32

我相信这是因为角4DI的性质。如果您将您的服务注入到两个组件中,而没有将它注入组件树中的父组件中,那么您将得到服务的两个不同实例。我的建议是在根组件构造函数中执行:

代码语言:javascript
复制
constructor(private videoService: VideoService) {}

除了注入服务之外,您不需要对此服务做任何事情。您可以在这里阅读更多有关此问题根源的文章:https://angular.io/guide/hierarchical-dependency-injection

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/47025209

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档