I am developing and angular 2 application with electron. Here's what i am trying to do.
I have a next button in html <button (click) = nextButtonClickedHandler()>
the nextButtonClickedHandler is described as follows:
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);
}
So, here, the event log on the console after _router.navigate says
I also added a console statement to see what the promise is returning.
this._router.navigate(['/next', 'route']).then(
success => console.log('navigation success');
failure => console.log('navigation end');
);
it prints "Navigation success". But, the component does't load. Not sure what is happening. Any help is greatly appreciated.
Note: this doesnt happen if electron is not involved. for example the below code works perfectly fine
public nextButtonClickedHandler() {
this._router.navigate(['/next', 'route']);
}
I stumbled in the same trouble, but with the "dialog" APIs. I noticed this happens not only with Electron APIs, but also with Node.js APIs; in general calling a route function inside a callback raise the issue.
I noticed also that if inside the callback some data of the Angular component are changed, the interface is not updated; I had to make an explicit call to the change detector: this.changeDetector.detectChanges();
I remember similar problems in AngularJS, when the apply() function has to be called if some work was done "outside" the Angular boundaries; maybe the issues are related.
In my case I was able to circumnvent the problem by switching to the "syncronous" version of Electron.remote.dialog, instead of:
this.electronService.remote.dialog.showOpenDialog({title:'Output Folder',
properties: ["openDirectory"] }, (folders) => {
this.projectService.theProject.targetFolder = folders[0];
this.changeDetector.detectChanges();
this.router.navigateByUrl('/open');
});
I tried this:
var folders = this.electronService.remote.dialog.showOpenDialog({title:'Output Folder',
properties: ["openDirectory"] });
if (folders) {
this.projectService.theProject.targetFolder = folders[0];
this.router.navigateByUrl('/open');
}
Not only it works in my case (Windows 8 /10), but I can also get rid of the change detector update.
Hope this helps.
PS: I used ngx-electron to wrap the Electron APIs
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments