在使用 ng-upgrade 在大型 ng1 (V1.5.9) 应用程序（使用 ui-router）中使用一些新的 ng2 (V2.2.4) 组件的应用程序中，我目前看到一个非常奇怪的更改检测问题。据我所知，这已在 ng2 的某些升级中引入，但遗憾的是我目前无法轻松验证。
到目前为止，我已将其简化为一个最小的示例，其中仅包含此组件：
@Component({
selector:'my-ng2-demo',
template: '<div>{{status}}</div>'
})
export class MyNg2Demo implements OnDestroy {
public status:boolean = true;
private interval:any;
constructor() {
this.interval = setInterval(() => {
this.status = !this.status;
console.log('status: ' + this.status);
}, 2000);
}
ngOnDestroy():void {
clearInterval(this.interval);
}
}
该组件在升级适配器中升级并注册为模块中的入口组件。
该组件在 ng1 控制器的模板中使用，如下所示：
<my-ng2-demo></my-ng2-demo>
当我打开浏览器并直接导航到该页面（ng1 控制器的路由）时，一切都按预期工作：ui 每 2 秒交替显示一次真/假。
但是：当我离开然后返回页面（访问一些不同的路线）时，突然变化检测似乎不起作用。显示的值大约每 5-6 秒交替一次，看起来很随机，尽管在控制台中我仍然看到预期值。
当我将组件的构造函数更改为此：
constructor(private zone: NgZone) {
this.interval = setInterval(() => {
zone.run(() => {
this.status = !this.status;
console.log('status: ' + this.status);
});
}, 2000);
}
它突然又起作用了。
显然这不是一个可行的解决方案，因为我在真实应用程序中看到的行为要复杂得多（我可能不得不添加zone.run几十个地方，这将是不可维护的）。
我已经调试了几个小时，不明白发生了什么。在 Chrome 的 JavaScript 分析器中，我基本上看到页面在 5-6 秒内几乎一直处于空闲状态，没有任何反应。
这不是来自该演示组件的屏幕截图（但它基本上看起来相同），而是来自我最初测试的选项卡组件的分析（选项卡切换所用的时间与中间没有可见的操作一样长）。
更新：
经过更多的实验后，我发现非常令人惊讶的是，当我没有将状态更改代码放入zone.run调用中时，我添加了一个调用ApplicationRef.tick()
（如此处所述，例如：https ://stackoverflow.com/a/34829089/ 1335619）它也根本不起作用。我不明白为什么强制进行完整的应用程序更改检测什么都不做，但是区域运行调用以某种方式起作用。
带有滴答调用的示例代码不起作用：
constructor(private applicationRef:ApplicationRef) {
this.interval = setInterval(() => {
this.status = !this.status;
console.log('status: ' + this.status);
applicationRef.tick();
}, 2000);
}