角度2变化检测因电子而破裂

发布时间：2020-12-17 17:46:44 所属栏目：安全来源：网络整理

导读：我有一个使用Angular 2的Electron应用程序.应用程序正常工作,直到使用ipcRenderer从本地 JSON文件加载数据.然后,作用于服务中的数据的按钮不再触发改变检测过程以更新视图.我创建了一个简化的示例应用程序来演示此处的问题 https://github.com/marshmellow13

我有一个使用Angular 2的Electron应用程序.应用程序正常工作,直到使用ipcRenderer从本地 JSON文件加载数据.然后,作用于服务中的数据的按钮不再触发改变检测过程以更新视图.我创建了一个简化的示例应用程序来演示此处的问题
https://github.com/marshmellow1328/electron-angular-change-detection

我不知道为什么按钮停止触发本机更改检测.必须添加ChangeDetectorRef似乎没有必要.如果是的话,我想了解原因.

解决方法

我调查了你的问题,并确定它发生是因为readFile处理程序在angular zone区域外执行.因此,它不会对您的点击事件做出反应,因为您离开了区域负责变更检测.

什么是最简单的解决方案？

app.component.ts

constructor(private zone: NgZone) {
...
this.zone.run(() => {
  data.values.forEach(( value ) => { this.service.addValue( value ); } );
});

然后你可以摆脱this.changeDetector.detectChanges();

使用zone.run(…),您可以明确地在Angulars区域内执行代码,然后运行更改检测.

还有一条建议：

我注意到app.component.ts中的reduntant代码如：

private service: Service;

constructor(service: Service ) {
    this.service = service;
}

您可以像下面这样重写它：

constructor(private service: Service ) {}

希望这对你有所帮助！

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!