Question

我想单击一个按钮在我的组件中打开文件夹对话框。这是我想要做的：

HTML：

<div>
    <input class="u-full-width" placeholder="Folder" type="text" [(ngModel)]="folder">
    <button id="browse" class="button-primary" (click)="browse()">Browse</button>
    <input id="fileInput" type="file" style="display: none" />
</div>

component.ts

// var remote = require('remote');
// var dialog = remote.require('dialog');

  folder: string;
  browse() {
    dialog.showOpenDialog({title: 'Select a folder', properties: ['openDirectory']}, (folderPath) => {
        if (folderPath === undefined){
            console.log("You didn't select a folder");
            return;
        }
        this.folder = folderPath;
    });
  }

那么，如何导入远程和对话框？

Answer 1

只需使用es6 import导入“远程”模块，然后您的ts文件就会像

import { remote } from 'electron';

folder: string;
browse() {
    remote.dialog.showOpenDialog({title: 'Select a folder', properties: ['openDirectory']}, (folderPath) => {
        if (folderPath === undefined){
            console.log("You didn't select a folder");
            return;
        }
        this.folder = folderPath;
    });
  }

Answer 2

您可以使用ngx-electron库

进行尝试

import {ElectronService} from 'ngx-electron'

export class DialogHelper {

    private static alert = new ElectronService().remote.dialog;
}

Answer 3

你关闭了。根据文档（https://github.com/electron/electron/blob/master/docs/api/dialog.md）在渲染器中使用它，您需要<input type="button" id="btnNavigator" value="get" onclick="navBuild(5);"/> <div id="contentBox"></div>，因此您的第一个const {dialog} = require('electron').remote变量是不必要的。

如何从角度2组件打开电子对话框？

3 个答案: