Angular 4 L'abonnement à observable ne se met pas à jour après modification

Question

J'ai un service avec une observable à laquelle on souscrit via un composant. Cela semble fonctionner comme l'abonné montre la valeur initiale. J'ai un autre composant qui met alors à jour l'observable mais la nouvelle valeur ne s'affiche pas.

Service:

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

} 

Composant avec abonné:

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

    } 
} 

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

} 

Toute aide serait vraiment apprécié, j'ai essayé un tas de différents choses et ne peut pas le faire fonctionner.

Answer 1

Vous vous abonnez à un observable, puis vous remplacez cet observable par un autre. C'est comme donner à quelqu'un une adresse e-mail où il peut lire les mails que vous lui envoyez, mais en remplaçant cette adresse email par une autre chaque fois que vous envoyez un e-mail. Évidemment, le destinataire ne recevra jamais vos mails si vous les envoyez à une autre adresse.

Vous devez utiliser le même, unique observable, et le faire émettre un nouvel événement. L'utilisation d'un sujet est la meilleure façon de le faire:

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

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