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的性质。如果将服务注入2个组件而不将其注入组件树中的父组件，则将获得2个不同的服务实例。我的建议是在你的根组件构造函数中执行：

group by

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

BehaviourSubject在跨两个兄弟组件更新后返回旧值

1 个答案: