Angular2:观察角度以外的外部变量

Question

我想能够在angular2之外的变量发生变化时观察和更新.所以,假设我在外部javascript文件中有这个:

var test = 1;

如何将此变量绑定到组件中的属性？

@Component({
   ...
})

export class MyComponent {
    watchy = window.test;
}

根据这个答案,显然这应该是有用的.
但事实并非如此.如果我在控制台中更改变量,则变量不会更新显示在模板中.我错过了什么吗？

Answer 1

Angular仅在异步执行函数完成时运行更改检测.该函数需要在Angulars区域内运行以获得角度以识别异步操作.

因为您的变量是从Angulars区域外部更改的.Angular不会运行更改检测.

您需要手动为Angular调用更改检测以识别已更改的变量.另请参阅手动触发Angular2更改检测

例如,如果您可以调度事件而不是仅设置变量,则可以监听事件.

window.dispatchEvent(new CustomEvent('test', {detail: 'newValue'}));

@Component({
   ...
})
export class MyComponent {
    @HostListener('window:test', ['$event'])
    testListener(event) {
      this.watchy = event.detail;
    }
}

调用的事件处理程序会自动调用Angulars更改检测,因此无需执行任何操作.