Angular 4 Subskription für Observable wird nicht aktualisiert nach Änderung

Question

Ich habe einen Dienst mit einer Observablen, die über eine Komponente abonniert wird. Dies scheint zu funktionieren, da der Abonnent den Anfangswert anzeigt. Ich habe eine andere Komponente, die dann das Observable aktualisiert, aber der neue Wert wird nicht angezeigt.

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

} 

Komponente mit Teilnehmern:

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

    } 
} 

Komponente mit Setzer:

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

} 

Jede Hilfe wäre wirklich zu erkennen ist, habe ich eine Reihe von verschiedenen versucht Dinge und kann es nicht funktionieren.

Answer 1

Sie abonnieren eine beobachtbare, und dann ersetzen Sie diese beobachtbare durch eine andere.

Das ist so, als würde man jemandem eine E-Mail-Adresse geben, an der er E-Mails lesen kann, die man an ihn sendet, aber jedes Mal, wenn man eine E-Mail sendet, diese E-Mail-Adresse durch eine andere ersetzen. Offensichtlich wird der Empfänger Ihre E-Mails niemals empfangen, wenn Sie sie an eine andere Adresse senden.

Sie müssen das gleiche, einzigartige Observable verwenden und es ein neues Ereignis emittieren lassen. ein Thema ist der einfachste Weg, das zu tun:

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

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