我已經設定了一個 electronjs 應用程式并在前端使用角度。起初我做錯了，并使用 websockets 進行這兩者之間的通信。該應用程式已經完成，但我想以正確的方式完成它并切換到 ipcRenderer 進行通信。
改變一切后，發生了一些奇怪的事情。呼叫 ipcRenderer 更改值后，UI 不再更新。例如，如果isInstalling設定為，我有一個獲取類的 html 元素true。當我更改值時，UI 將更改為。這確實有效，ws但現在使用 ipcRenderer 將無法正常作業。該值仍將被設定，但 UI 只是不會更新。isInstalling設定為true點擊事件觸發時，將設定為呼叫false時。onFinished
這是我的代碼：
預加載.js
contextBridge.exposeInMainWorld("ipcRenderer", {
onStep: (callback) => ipcRenderer.on("step", callback),
onDownload: (callback) => ipcRenderer.on("download", callback),
onFinished: (callback) => ipcRenderer.on("finished", callback),
[...]
});
ipc.service.ts
export class IpcService {
constructor() { }
getIpcRenderer(){
return (<any>window).ipcRenderer;
}
}
應用程式組件.ts
ngOnInit(): void {
console.log("INIT");
this.ipcRenderer.onStep((event: any, text: string) => {
this.addStep(text);
});
this.ipcRenderer.onDownload((event: any, data: any) => {
this.progress = data.percent;
this.current = data.current;
this.total = data.total;
});
this.ipcRenderer.onFinished((event: any) => {
console.log("Finished!!");
this.isInstalling = false;
});
}
addStep(step: string) {
this.steps.push(step)
this.steps = [...this.steps]; // Before, this will force an update of a displayed list that used *ngFor
}
應用程式組件.html
<div [ngClass]="{'disabledImage': isInstalling}" (click)="download()">
<img style="margin: 0px;" width="400px" src="./assets/image.png">
</div>
所以所有的代碼在過去都有效，但現在不行了。同樣奇怪的是，我顯示的串列this.steps不會顯示實時更改，但是當我再次觸發點擊事件時，所有串列項都會顯示。好像點擊會更新用戶界面，僅此而已。
那么知道我需要在這里做什么嗎？
uj5u.com熱心網友回復：
Angular 使用 zone.js 來檢測變化，但默認情況下它不知道電子的 ipcRenderer。您可以通過將此添加到 polyfills.ts 的末尾來啟用支持：
import 'zone.js/dist/zone-patch-electron';
或者，您可以在每個回呼中手動觸發更改檢測：
應用程式組件.ts
constructor(private ngZone: NgZone) {}
//...
this.ipcRenderer.onFinished((event: any) => {
this.ngZone.run(() => { // trigger zone change detection
console.log("Finished!!");
this.isInstalling = false;
});
});
https://github.com/angular/zone.js/blob/master/NON-STANDARD-APIS.md（電子部分）
https://angular.io/guide/zone
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/537242.html