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

还有其他方法可以做到这一点。例如是使用对象而不是字符串。字符串不可变