Angular2 Doppelbindung nicht aktualisiert

Question

Banner html template

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

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

Banner Komponente

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

Staatsdienst

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

ich auf Winkel 2 einige Tutorials bin nach und ich versuche, einen gemeinsamen Service (common state) haben, der eine Eigenschaft hat, die Sie aus einer Komponente (Banner) setzen können.

Alles wird kompiliert und der Setter im Staatsdienst wird mit dem korrekten Wert ausgelöst. Nur ist die doppelte Bindung (Nachricht: {{message}}) in banner.component.html nicht aktualisiert. Wie ist das nicht der Fall?

Answer 1

So funktioniert es nicht. Um es auf diese Weise zu arbeiten, müssen Sie Observable verwenden, aber das ist eine andere Geschichte.

Hier können Was Sie tun, ist,

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

Oder Sie können einfach Getter wie schreiben:

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

und Sie werden nicht die html ändern müssen :

message: {{message}} 

Es gibt auch andere Möglichkeiten, dies zu tun. Zum Beispiel verwenden Sie Objekt anstelle von String. Zeichenfolgen sind unveränderlich