Angular 4订阅observable不会更新后更新

Question

我有一个服务，通过组件订阅的observable。这似乎在订户显示初始值时起作用。我有另一个组件，然后更新observable但是新值没有显示。

服务：

import { Injectable } from '@angular/core'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/observable/of'; 

@Injectable() 

export class BannerService { 

    banners$: Observable<any[]> = Observable.of([]); 

    getBanners(): Observable<any[]> { 
     return this.banners$; 
    } 

    setBanners(banners: any[]): void { 
     this.banners$ = Observable.of(banners); 
    } 

} 

组件与用户：

import { Component, ViewEncapsulation, OnInit } from '@angular/core'; 

import { BannerService } from './../banner/banner.service'; 

@Component({ 
    selector: '.banner', 
    templateUrl: './banner.component.html', 
    styleUrls: ['./banner.component.sass'], 
    encapsulation: ViewEncapsulation.None 
}) 

export class BannerComponent implements OnInit { 

    constructor(private bannerService: BannerService){} 

    ngOnInit() { 
     this.bannerService.banners$.subscribe(banners => { 
      console.log(banners); 
     }); 

    } 
} 

组件与二传：

import { Component, ViewEncapsulation, OnInit } from '@angular/core'; 

import { BannerService } from './../banner/banner.service'; 

@Component({ 
    selector: '.home-component', 
    templateUrl: './home.component.html', 
    styleUrls: ['./home.component.sass'], 
    encapsulation: ViewEncapsulation.None 
}) 

export class HomeComponent implements OnInit { 

    data = { 
     banners: [ 
      { 
       title: 'Title 1', 
       image: '../images/image1.jpg' 
      }, 
      { 
       title: 'Title 2', 
       image: '../images/image2.jpg' 
      }, 
      { 
       title: 'Title 3', 
       image: '../images/image3.jpg' 
      } 
     ] 
    } 

    constructor(private bannerService: BannerService){} 

    ngOnInit(): void { 
     this.bannerService.setBanners(this.data.banners); 
    } 

} 

任何帮助将非常感激，我已经尝试了一堆不同事情，并不能得到它的工作。

Answer 1

您订阅一个observable，然后用另一个替换该observable。

这就像给某人一个电子邮件地址，他可以在那里读取发送给他的邮件，但是每次发送电子邮件时都会用另一个邮件地址替换该电子邮件地址。显然，如果您将邮件发送到不同的地址，收件人将永远不会收到您的邮件。

您需要使用相同的，独特的observable，并使其发出新的事件。使用主题是做到这一点的最简单的方法：

banners$: Subject<any[]> = new BehaviorSubject<any[]>([]); 

setBanners(banners: any[]): void { 
    this.banners$.next(banners); 
}