javascript - 为什么更新后不触发onChanges

Question

我有以下父组件:

@Component({
    selector: 'hello-world',
    template: `
    <div>
        <private [text]="value"></private>
    </div>`
})

export class HelloWorldComponent {
    public value: number = 3;

    constructor() {
        setTimeout(function () {
            this.value = 5;
        }, 3000);
    }
}

和子组件:

@Component({
    selector: 'private',
    template: `<span>{{text}}</span>`
})

export class PrivateComponent implements OnChanges {
    @Input() public text: string;

    ngOnChanges(changes: SimpleChanges): void {
        console.log(changes.text.currentValue);
    }
}

ngOnChanges 仅在预期值为 3 时触发一次，但在值为 5 时不会第二次触发。为什么？

Answer 1

当您将值更改为 5 时，this 指的是您传递给 setTimeout 的匿名函数，而不是您的 HelloWorldComponent 实例，您可以将构造函数更改为如下所示:

constructor() {
    var _self = this;
    setTimeout(function () {
        _self.value = 5;
    }, 3000);
}