모델 변경 후 각도 2보기가 업데이트되지 않습니다.

Question

모델이 명확하게 업데이트 되더라도 업데이트 할 수 없습니다. NgZone을 사용해 보았지만 도움이되지 않습니다.

두 구성 요소 (app.component 및 start-page-list.component)에 RouteService를 주입하고 있습니다. RoutService 구성 요소간에 데이터를 전달하는 주제 사용 : 예상하지만, 시작 페이지 list.component하지 않는 것처럼

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보기가 업데이트됩니다.

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

은 여기 currentRound.id가 업데이트됩니다! (app.component에서 라우터 출구 렌더링)

시작 페이지 list.component :

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

} 

여기 currentGameset.id 모델이 경우에도 업데이트되지 않는다 (콘솔 로그 방송 갱신 값) . NgZone을 사용해 보았습니다.

어떤 제안이 여기에 잘못되었을 수 있습니까?

편집 start-page-list.component를 하위 구성 요소로 app.component에두면 문제가 발생하지 않습니다. 그러면 예상대로 뷰가 업데이트됩니다. 문제는 내가 구성 요소의 라우터 - 아웃렛 렌더링을 사용하는 경우 인 것 같습니다.

Answer 1

서비스에서 제목 대신 BehaviorSubject를 사용하는 것이 해결책이라고 밝혀졌습니다!

왜 그런지 설명해 주시겠습니까?

Answer 2

currentGameset = data을 수행하면 템플릿이 의미하는 내용을 위반하게됩니다. 당신은 현재의 Gameset을 계속 참고한다고 생각 하겠지만 그것이 작동하는 방식은 아닙니다!

this.gameSetParent.currentGameset = data; 

당신은 변화를 반영하기 위해 템플릿을 업데이트해야, 콜백 FUNC에서

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

:

봅니다처럼 currentGameset에 대한 래퍼를 추가합니다.