在使用 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 Controller 的模板中使用如下:
<my-ng2-demo></my-ng2-demo>
当我打开浏览器并直接导航到该页面(ng1 Controller 的路由)时,一切都按预期工作:用户界面每 2 秒交替显示 true/false。
但是:当我离开然后返回页面(访问一些不同的路线)时,突然变化检测似乎不起作用。显示的值大约每 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 秒内几乎一直处于空闲状态,没有任何反应。
这不是该演示组件的屏幕截图(但它看起来基本相同),而是来 self 最初测试的选项卡组件的概要分析(选项卡切换花费的时间与两者之间没有可见的操作一样长)。
更新:
经过更多的实验后,我发现非常令人惊讶的是,当我没有将状态更改代码放入 zone.run
调用时,我添加了对 ApplicationRef.tick 的调用()
(例如此处提到的:https://stackoverflow.com/a/34829089/1335619)它也根本不起作用。
我不明白为什么强制执行完整的应用程序更改检测没有任何作用,但区域运行调用却能以某种方式起作用。
带有不起作用的 tick 调用的示例代码:
constructor(private applicationRef:ApplicationRef) {
this.interval = setInterval(() => {
this.status = !this.status;
console.log('status: ' + this.status);
applicationRef.tick();
}, 2000);
}
最佳答案
您使用的 Angular 版本存在错误。更改检测在 ng-upgraded 应用程序中不起作用。
请引用https://github.com/angular/angular/issues/12318了解更多详情。
如果升级到 2.4.4,应该可以解决问题。
关于angularjs - 通过 angular1 ui-router 导航后,更改检测在 ng2 组件中无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41278719/