Angular2双重绑定未更新

Question

banner html template

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

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

banner component

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

state service

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

I'm following some tutorials on angular 2 and I'm trying to have one shared service (common state) which has a property which you can set from a component (banner).

Everything is compiling and the setter inside the state service is fired with the correct value. Only is the double binding (message: {{message}}) inside banner.component.html not updated. How come this is not the case?

Answer 1

This way it doesn't work. To work it this way you have to use Observable but that's a different story.

Here, What you can do is,

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

Or you can just write getter like:

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

and you won't need to change the html:

message: {{message}}

There are also another ways to do that. For example is use object instead of string. Strings are immutable