Angular 2 Ansicht wird nicht aktualisiert nach Modellwechsel

Question

Ich kann meine Ansicht nicht aktualisieren, obwohl mein Modell klar aktualisiert ist. Versucht mit NgZone, aber es hilft nicht.

Ich injiziere RouteService in zwei Komponenten: app.component und start-page-list.component. RoutService wird unter Verwendung von Fachdaten zwischen Komponenten weitergeben müssen:

import { Injectable } from '@angular/core'; 
import { Round } from "app/round"; 
import { Subject } from "rxjs/Subject"; 

@Injectable() 
export class RoundService { 

    private roundSource = new Subject<Round>(); 

    roundItem$ = this.roundSource.asObservable(); 

    changeRound(value:Round) { 
    this.roundSource.next(value); 
    } 
} 

app.components Ansicht wie erwartet aktualisiert wird, aber Start-Seite-list.component nicht.

app.component:

import { Component } from '@angular/core'; 
import { Http } from "@angular/http"; 
import 'rxjs/add/operator/toPromise'; 
import { RoundService } from "app/round.service"; 
import { Round } from "app/round"; 

@Component({ 
    selector: 'app-root', 
    template: ` 
    <div class="container"> 
    <div class="page-header"> 
    <h1>{{currentRound.id}}</h1> 
    </div> 
    </div> 
    <router-outlet></router-outlet> 
    `, 
    styleUrls: [] 
}) 
export class AppComponent { 
    currentRound: Round = {id:0,name:"No round set yet"}; 

    constructor(private http: Http, private round : RoundService) { } 

    callBackFunc(data:Round) { 
    this.currentRound = data; 
    } 

    ngOnInit() { 
    this.round.roundItem$.subscribe(
     (data:Round) => this.callBackFunc(data) 
    ); 
    } 
} 

Hier currentRound.id aktualisiert!

Start-Seite-list.component (am Router-Ausgang in app.component gerendert):

import { Component, OnInit, Input, NgZone } from '@angular/core'; 
import { PlayerService } from "app/player.service"; 
import { Game } from "app/game"; 
import { Player } from "app/player"; 
import { GameService } from "app/game.service"; 
import { RoundService } from "app/round.service"; 
import { Round } from "app/round"; 
import 'rxjs/add/operator/toPromise'; 

@Component({ 
    selector: 'app-start-page-list', 
    template: `{{currentGameset.id}}`, 
    styleUrls: [] 
}) 
export class StartPageListComponent implements OnInit { 

    currentGameset:Round = {id:0,name:'No round set yet'}; 

    constructor(private gameService: GameService, private roundService: RoundService, private zone: NgZone) { } 

    callbackFunc(data:Round) { 
    this.currentGameset = data; 
    console.log("currentGameset.id= " + this.currentGameset.id); 
    } 

    ngOnInit() { 
    this.roundService.roundItem$.subscribe(
     (data:Round) => this.zone.run(() => this.callbackFunc(data)) 
    ); 
    } 

} 

Hier currentGameset.id wird nicht aktualisiert, obwohl das Modell (Konsolenprotokoll zeigt aktualisierte Wert) . Wie Sie sehen können, habe ich versucht, NgZone zu verwenden.

Irgendwelche Vorschläge, was hier falsch sein könnte?

Bearbeiten Wenn ich die start-page-list.component als eine untergeordnete Komponente in die app.component setzen, bekomme ich das Problem nicht. Dann wird die Ansicht aktualisiert, wie ich es erwarte. Das Problem scheint nur dann zu sein, wenn ich das Router-Outlet-Rendering der Komponente verwende.

Answer 1

Es stellte sich heraus, dass die Verwendung von BehaviorSubject anstelle von Subject im Service die Lösung war!

Wer möchte erklären warum?

Answer 2

Wenn Sie currentGameset = data tun, brechen Sie, worauf sich die Vorlage bezog. Sie würden denken, dass es sich weiterhin auf das aktuelle Gameset beziehen wird, aber so funktioniert es nicht!

Versuchen einen Wrapper für currentGameset wie hinzuzufügen:

gameSetParent = { 
    currentGameset: {id:0,name:'No round set yet'}; 
} 

In Callback func,

this.gameSetParent.currentGameset = data; 

Sie müssen die Vorlage aktualisieren, um die Änderung widerzuspiegeln.