Question

我正在开发和角度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后的控制台上的事件日志

RoutesRecognised
卫兵检查开始
卫兵检查成功
Guards Check End
导航结束

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

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

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

注意：如果不涉及电子，则不会发生这种情况。例如，下面的代码完全正常

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

Answer 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]))
  )
}

Answer 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

Answer 3

在电子的github存储库中创建了一张错误票。 =＆GT; https://github.com/electron/electron/issues/11809

我有同样的问题。

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

3 个答案: