Angular2雙重綁定不更新

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

我以下的角2一些教程和我想要的狀態服務有一個共享服務（通用狀態），它具有可以從組件（標題）設置的屬性。

一切都在編譯，並且狀態服務中的setter被正確的值觸發。僅在banner.component.html中的雙重綁定（消息：{{message}}）未更新。 這是怎麼回事？

Answer 1

這種方式不起作用。要這樣工作，你必須使用Observable但這是一個不同的故事。

在這裏，你可以做的是，

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

或者你可以只寫吸氣，如：

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

，你會不會需要更改HTML ：

message: {{message}} 

還有其他方法可以做到這一點。例如是使用對象而不是字符串。字符串不可變