データが変更されたときにAngular2ビューが更新されない

Question

ここで、データ変更を反映するためにビューを取得する方法についてのもう1つの質問があります。

メインアプリケーションコンポーネントテンプレートでホストされているサービスと関連コンポーネント（ページメッセージ）があります。

サービスは配列を公開します。アレイの初期データは表示されますが、アレイの変更はビューで認識されません。

私は、この作業を行うためにrx Observableを使用する必要があるかもしれないと思っていますが、それがいつ必要なのかはっきりしていません。

編集：ここではが観察が必要とされていないことを実証する作業Plunkerです：https://plnkr.co/edit/2iK9YOwLFfY3EylJn6At?p=preview

私はmessageService.pageErrorMessagesへの変更を認識してレンダリングするページ・メッセージのコンポーネントHTMLビューを取得するために何をしないのですアレイ？

app.component.html

<page-message></page-message> 

app.component.ts私は

@Component({ 
    moduleId: __moduleName, // fully resolved filename; defined at module load time 
    selector: 'my-app', 
    directives: [ROUTER_DIRECTIVES, NavbarComponent, PageMessageComponent], 
    templateUrl: "app.component.html", 
    providers: [ApiService, MessageService] 
}) 

export class AppComponent { 
    ... 

アプリのコンポーネントにメッセージをサービスを提供しています実証するスニペットを.service.ts

私はこれが更新されていないコンポーネントのHTMLである*メッセージ

import {Injectable} from '@angular/core'; 

@Injectable() 
export class MessageService { 
    constructor() { 
    } 

    pageErrorMessages: Array<string> = new Array(); 

    addPageError(message: string) { 
     this.pageErrorMessages.push(message); 
    } 
} 

ページ-message.component.html

を追加/削除するためのインタフェースを提供するために、message.serviceを使用しています正しく*

<div *ngFor="#message of messageService.pageErrorMessages"> 
    <div class="alert alert-danger">{{message}}</div> 
</div> 

ページ-message.component.ts

import {Component} from '@angular/core'; 
import {MessageService} from "./../services/message.service"; 

@Component({ 
    moduleId: __moduleName, 
    selector: __moduleName, 
    templateUrl: "page-message.component.html", 
    providers: [] 
}) 

export class PageMessageComponent { 
    constructor(public messageService: MessageService) { } 
} 

いくつか-他-component.ts

私はそれと主張@マークRajcokにメッセージアレイに

submit() { 
    this.messageService.addPageError("this is an error"); 
} 

Answer 1

おかげでエントリを追加する場所ですこの場合Observableを使用する必要はありません。

私はここにplunker

観察可能なビューを使用せずに正常に動作して私の質問にシナリオを示し更新plunkerを作成しました： https://plnkr.co/edit/2iK9YOwLFfY3EylJn6At?p=preview

これは、メッセージを表示するコンポーネントです：

import {Component} from '@angular/core' 

import {MessageService} from './messageService' 

@Component({ 
    selector: 'my-messagebar' 
    template: ` 
    <div *ngFor="#message of messageService.messages">{{message}}</div> 
    ` 
}) 

export class MessagebarComponent { 

    constructor(public messageService:MessageService) { 
    } 

} 

残念ながら私は特定の原因を挙げることはできませんが、これも私のアプリケーションで正しく機能しています。おそらくそれは状況を混乱させる初心者のミスの蓄積です。私はこの質問を残してお答えします。おそらくプランカが他の人を助けるでしょう。