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

Question

我有一个带有可观察对象的服务，该服务是通过组件订阅的。这似乎有效，因为订阅者正在显示初始值。我有另一个组件正在更新可观察对象，但是新值没有显示。

服务：

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);
        });

    }
}

具有 setter 的组件：

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

您订阅了一个可观察对象，然后用另一个可观察对象替换了该可观察对象。

这就像给某人一个电子邮件地址，让他可以阅读您发送给他的邮件，然后在您每次发送电子邮件时将该电子邮件地址替换为另一个电子邮件地址。显然，如果您将邮件发送到其他地址，收件人将永远不会收到您的邮件。

您需要使用相同的、唯一的可观察对象，并使其发出新事件。使用主题是最简单的方法：

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

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

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

Angular 4 Subscribing to observable is not updating after change

angular-services

angular-components

angular

angular-observable