Angular 2变化检测与电子分解

Question

我使用Angular2具有电子应用。该应用程序正常工作，直到使用IpCrenderer的Local JSON文件加载数据为止。然后，对服务中数据作用的按钮不再触发更改检测过程以更新视图。我创建了一个简化的示例应用程序，该应用在这里说明问题：https://github.com/marshmellow1328/electron-angular-angular-change-detection

我不知道为什么按钮停止触发本机更改检测。不得不添加更改eTectorRef似乎不需要。如果是这样，我想了解为什么。

Answer 1

我调查了您的问题，并确定它发生了，因为readFile处理程序是在角区外执行的。因此，它不会在单击事件中做出反应，因为您离开了负责变更检测的区域。

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

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中的反复代码，例如：

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

您可以像以下方式重写：

constructor(private service: Service ) {}

希望这对您有帮助！