Angular2は、二重結合、私は角2にいくつかのチュートリアルを以下だし、私がしようとしている

Question

バナーHTMLテンプレート

body: {{body}} 
    <br> 
    message: {{message}} 

    <button type="submit" (click)="updateMessage('haha')">Update Message</button> 

バナーコンポーネント

import { Component } from '@angular/core'; 
import { StateService } from 'app/common/state.service'; 

@Component({ 
    selector:  'banner', 
    templateUrl: 'app/banner/banner.component.html', 
    providers: [StateService] 
}) 
export class BannerComponent { 
    body:   string = 'This is the about home body'; 
    message:  string; 

    constructor(private stateService: StateService) { 

    } 

    ngOnInit() { 
     this.message = this.stateService.getMessage(); 
    } 

    updateMessage(m: string): void { 
     this.stateService.setMessage(m); 
    } 
} 

状態サービス

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

@Injectable() 
export class StateService { 
    private message = 'Hello Message'; 
    getMessage(): string { 
     return this.message; 
    }; 
    setMessage(newMessage: string): void { 
     console.error('setting message' + newMessage); 
     this.message = newMessage; 
    }; 
} 

を更新していませんコンポーネント（バナー）から設定できるプロパティを持つ1つの共有サービス（共通の状態）を持つこと。

すべてがコンパイルされ、状態サービス内の設定者が正しい値で起動されます。 banner.component.html内の二重バインド（メッセージ：{{message}}）のみが更新されません。 どうしたのでしょうか？

Answer 1

この方法では動作しません。このようにするには、Observableを使用する必要がありますが、それは別の話です。

get message(): string { 
    return this.stateService.getMessage(); 
} 

、あなたがHTMLを変更する必要はありません。ここで

、何ができることは

{{stateService.getMessage()}} //<<<====use getMessage() in template as shown here. 

---

export class BannerComponent { 
    body:   string = 'This is the about home body'; 
    message:  string; 

    constructor(private stateService: StateService) {} 
______________________________________________________ 
    /*   not required anymore 
    ngOnInit() { 
     this.message = this.stateService.getMessage(); 
    } 
    */ 
_______________________________________________________ 
    updateMessage(m: string): void { 
     this.stateService.setMessage(m); 
    } 
} 

それとも、同じようにゲッターを書くことができ、あります：

message: {{message}} 

これを実行する別の方法もあります。たとえば、stringの代わりにobjectを使用します。文字列は不変です