Angular2:属性绑定何时发生?

时间:2017-09-22 13:44:21

标签: javascript angular typescript

我刚开始使用Angular2,阅读官方文档。但是,我没有找到关于绑定如何以及何时发生的具体细节,而且事情似乎并没有像我预期的那样发挥作用。

我有一个简单的子组件

@Component({
  selector: 'dummy',
  template: `
    <div>{{data}}</div>
  `
})
export class Dummy {
  @Input() data;

}

和根组件

@Component({
  selector: 'main',
  template: `
    <h1>hello</h1>
    <dummy [data]="data"></dummy>
  `
})
export class MainComponent {
    data: string = "initial text";

    ngOnInit() {
      setTimeout(this.initData, 5000);
    }

    initData() {
      this.data = "new text";
    }
}

我希望子组件显示的文本在5秒后改变,但它不会。我究竟做错了什么?文档是否说明何时以及在何种条件下初始化和更新绑定值?

2 个答案:

答案 0 :(得分:2)

你失去了this的背景。在setTimeout回调运行时,this不再指向该组件。您可能想查看一下javascript this problem

尝试:

setTimeout(()=>{
      this.data = "new text";
 },5000);

答案 1 :(得分:0)

您忘记导入OnInit界面并让您的组件实现它。

import { Component, OnInit } from '@angular/core';

然后

export class MainComponent implements OnInit { ... }