Question

我在使用Electron和Angular开发（创建环境）桌面应用程序时遇到了问题。此应用程序在某些时候必须触发一个特定于Electron的showOpenDialog，以便从文件系统中选择一个目录。假设我有以下角度分量：

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <button (click)="openDirectory()">Open directory</button>
        <p> {{selectedDirectory}} </p>
    `
})

export class AppComponent {

    selectedDirectory: string = "None";
    openDirectory() {
        // Here I need to call the 'showOpenDialog' from electron
        // and update the selectedDirectory property
    }

}

...但在showOpenDialog中调用openDirectory将无效，并且会返回编译错误，因为Angular没有showOpenDialog确实是谁的线索。在典型的Electron应用程序中，您将编写如下内容：

const {dialog} = require('electron').remote;

var path = dialog.showOpenDialog({
    properties: ['openDirectory']
});

现在我必须构建Angular项目，修改bundle.js文件，最后添加电子功能，如showOpenDialog等。之后，我需要将分发文件复制到Electron项目中。我知道，这真是一团糟问：开发此类应用程序的更好方法是什么？像同一项目中的Angular和Electron环境一样。

Answer 1

您只需在角度应用程序中安装电子（及其类型），然后导入您的依赖项安装： npm安装电子@ types /电子用法：从'电子'导入{remote}; openDirectory（）{ remote.showOpenDialog（）; }

用Electron和Angular 2开发桌面应用程序

1 个答案: