Question

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

或者你可以写下getter：

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

并且您不需要更改html：

message: {{message}}

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

Angular2双重绑定未更新

1 个答案: