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

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

var test = 1;

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

@Component({
   ...
})

export class MyComponent {
    watchy = window.test;
}

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

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

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

您需要手动为Angular调用更改检测以识别已更改的变量.另见Triggering Angular2 change detection manually

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

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

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

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

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

相关文章