javascript - 在两个同级组件之间更新后，BehaviorSubject 返回旧值

Question

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

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

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() 时，它总是返回原始值。不是更新后的值。

Answer 1

我相信这是因为 Angular 4 DI 的本质。如果您将服务注入(inject)到 2 个组件中，而不将其注入(inject)到组件树中的父组件中，您将获得该服务的 2 个不同实例。我的建议是在你的根组件构造函数中执行以下操作:

constructor(private videoService: VideoService) {}

除了注入(inject)之外，您不需要对该服务执行任何操作。您可以在此处详细了解此问题的根本原因:https://angular.io/guide/hierarchical-dependency-injection