javascript - Angular - 模型更改后 Electron View 不会更新

Question

我有一个字段，使我能够从 Electron 对话框中选择文件夹。单击该字段后，将打开对话框，我可以选择文件夹。但是，点击“确定”后，即使我的模型包含文件夹的路径，它也不会反射(reflect)在输入字段中，直到我单击字段外部(当它失去焦点时)。我到底该如何解决这个问题？

模板包含:

<input type="text" class="form-control" (click)="onClickPath($event)" [(ngModel)]="currentConfiguration.workspacePath" id="workspace-path" name="workspace-name" aria-label="workspace" aria-describedby="workspace-lable">

CurrentConfiguration.ts

export class CurrentConfiguration {
    workspacePath: string;
}

configuration.component.ts

currentConfiguration: CurrentConfiguration = {
        workspacePath: ""
    };

//onClickedPath event: 

    onClickPath(event) {
            console.log("clicked: ", event.target.id);

            // open the dialog to select the directory
            const dir = this.electronService.remote.dialog.showOpenDialog({
                properties: ["openDirectory"],
                title: event.target.id.split('-').join(" ")
            }, (folderPath) => {
                console.log(folderPath);

                if (folderPath[0] == undefined) {
                    this.electronService.remote.dialog.showMessageBox({
                        type: "error",
                        buttons: ["ok"],
                        title: "Error",
                        message: "Please select the folder"

                    });
                }
                else{
                    // set the correct directoryPath. 
                    this.currentConfiguration[event.target.id.split('-')[0] + 'Path'] = folderPath[0];
                }
            });

        }

Answer 1

注意 - 这几乎是 This question 的骗局由于它帮助我解决了问题，我将发布答案。

Electron 对话框似乎在 Angular 区域之外运行，因此对数据的任何更新都不会触发 Angular 刷新 View 。

为了使刷新发生，我必须在区域内执行逻辑，如下所示:

import { NgZone } from '@angular/core';
...
...
currentConfiguration: CurrentConfiguration = {
        workspacePath: ""
    };

//onClickedPath event: 

    onClickPath(event) {
            console.log("clicked: ", event.target.id);

            // open the dialog to select the directory
            const dir = this.electronService.remote.dialog.showOpenDialog({
                properties: ["openDirectory"],
                title: event.target.id.split('-').join(" ")
            }, (folderPath) => {
                console.log(folderPath);

                if (folderPath[0] == undefined) {
                    this.electronService.remote.dialog.showMessageBox({
                        type: "error",
                        buttons: ["ok"],
                        title: "Error",
                        message: "Please select the folder"

                    });
                }
                else{
                   // run all of this inside the zone
                   this.zone.run(() => {
                    // set the correct directoryPath. 
                    this.currentConfiguration[event.target.id.split('-')[0] + 'Path'] = folderPath[0];
                    }); // end of zone
                }

            });

        }