用Electron和Angular 2開發桌面應用程序

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 
    } 

} 

...但調用openDirectoryshowOpenDialog將無法​​正常工作，它會返回一個編譯錯誤，因爲角沒有線索誰showOpenDialog確實是。 在你寫的東西就像一個tipical電子申請：

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

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

現在我必須建立角項目，修改bundle.js文件最後加入電子功能類似showOpenDialog等。之後，我需要將分發文件複製到Electron項目中。我知道，這真是一團糟。
問：開發這種應用程序有什麼更好的方法？像同一個項目中的Angular和Electron環境一樣。

Answer 1

您只需將您的角度應用內部安裝電子（及其類型），然後導入你的依賴

安裝：

npm install electron @types/electron 

用法：

import { remote } from 'electron'; 


openDirectory() { 
    remote.showOpenDialog(); 
}