angular 2 router.navigate 不适用于电子 IPC 回调答案

【问题标题】：angular 2 router.navigate doesn't work with electron IPC callbackangular 2 router.navigate 不适用于电子 IPC 回调
【发布时间】：2018-07-12 01:11:59
【问题描述】：

我正在使用电子开发 Angular 2 应用程序。这就是我想要做的。
我在 html 中有一个下一个按钮 <button (click) = nextButtonClickedHandler()>

nextButtonClickedHandler描述如下：

public nextButtonClickedHandler() {
  this.requestElectronMainProccess(this.afterResponseReceived);
}

private public afterResponseReceived() {
  this._router.navigate(['/next', 'route']);
}

public requestElectronMainProccess(callbackFn: Function) {
  this._electronService.send('request', 'some data');
  this._electronService.once('response', callbackFn);
}

所以，这里，_router.navigate 之后控制台上的事件日志说

已识别路线
警卫检查开始
Guards 检查成功
守卫检查结束
导航结束

我还添加了一个控制台语句来查看 promise 返回的内容。

this._router.navigate(['/next', 'route']).then(
 success => console.log('navigation success');
 failure => console.log('navigation end');
);

它打印“导航成功”。但是，该组件不加载。不知道发生了什么。任何帮助是极大的赞赏。

注意：如果不涉及电子，则不会发生这种情况。例如下面的代码工作得很好

public nextButtonClickedHandler() {
  this._router.navigate(['/next', 'route']);
}

【问题讨论】：

标签： angular electron

【解决方案1】：

解决方法...

import { Router } from '@angular/router';
import { NgZone } from '@angular/core';

constructor(private zone: NgZone, private router: Router){
  ipcRenderer.on('youevent', (event) => 
     this.zone.run(() => this.router.navigate([path]))
  )
}

【讨论】：

【解决方案2】：

我遇到了同样的麻烦，但使用了“对话框”API。我注意到这不仅发生在 Electron API 上，而且发生在 Node.js API 上；通常在回调中调用路由函数会引发问题。

我还注意到，如果在回调中更改了 Angular 组件的某些数据，则界面不会更新；我必须明确调用更改检测器：this.changeDetector.detectChanges();
我记得 AngularJS 中的类似问题，如果某些工作在 Angular 边界“之外”完成，则必须调用 apply() 函数；也许这些问题是相关的。

就我而言，我可以通过切换到Electron.remote.dialog 的“同步”版本来规避这个问题，而不是：

this.electronService.remote.dialog.showOpenDialog({title:'Output Folder',  
properties: ["openDirectory"] },  (folders) => {
     this.projectService.theProject.targetFolder = folders[0];
     this.changeDetector.detectChanges();
     this.router.navigateByUrl('/open');
});

我试过了：

  var folders = this.electronService.remote.dialog.showOpenDialog({title:'Output Folder', 
         properties: ["openDirectory"] });
  if (folders) {
    this.projectService.theProject.targetFolder = folders[0];
    this.router.navigateByUrl('/open');
  }

它不仅适用于我的情况（Windows 8 / 10），而且我还可以摆脱更改检测器更新。

希望这会有所帮助。

PS：我使用 ngx-electron 来包装 Electron API

【讨论】：

【解决方案3】：

在 electron 的 github 存储库中创建了一个 bug 票。 => https://github.com/electron/electron/issues/11809

我也有同样的问题。

【讨论】：