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, и я стараюсь иметь одну общую службу (общее состояние), которая имеет свойство, которое вы можете установить из компонента (баннера).

Все компилируется, и установщик внутри государственной службы запускается с правильным значением. Только double binding (message: {{message}}) внутри banner.component.html не обновляется. Почему это не так?

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

Есть и другие способы сделать это. Например, используется объект вместо строки. Строки неизменяемы