Question

我正在尝试使用最新版本的Angular和Electron开发一个非常简单的应用程序。为此，我遵循了Angular和Electron的教程。经过一整天的反复试验，最后我可以开始申请（source code on GitHub）现在我正在努力打开像对话这样的基本事情。我试图遵循Electron documentation并根据我的理解进行调整，但在执行以下代码时，Angular停止工作：

// file: \src\app\app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'FotoManager';

  openImages(){
    console.log("function called");
    var {dialog} = remote;
    dialog.showOpenDialog({properties: ['openFile', 'openDirectory', 'multiSelections']});
  }
}

文件\src\app\app.component.html如下所示：

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    {{ title }}
  </h1>
</div>

<button (click)="openImages()">Open images</button>

当删除openImages()的最后两行时，一切正常（Angular正在工作，我看到按钮并单击按钮导致在控制台中记录function called）。

我做错了什么？

Answer 1

花了很多时间后，我终于找到了this hack。现在我有以下代码对我有用：档案index.html：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Fotomanager</title>
  <base href="./">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">

  <script>  
    var electron = require('electron');  
  </script>
</head>
<body>
  <app-root></app-root>
</body>
</html>

my.component.ts：

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

declare var electron: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'FotoManager';

  openImages(){
    console.log("function called");
    electron.remote.dialog.showOpenDialog({properties: ['openFile', 'openDirectory', 'multiSelections']});
  }
}

如何从Angular调用showOpenDialog（）？

1 个答案: