在 angular2 组件中需要节点模块

Question

我无法弄清楚如何在我的 angular2 组件中要求节点模块 - 特别是在我的情况下，如何在 angular2 组件中打开一个新的电子窗口。

我的 component.html 有这样的东西

<button class="btn btn-success" (click)="buttonLoginClick()">Login</button>

在 component.ts 中，我使用以下内容

export class LoginComponent  {
  constructor() {}

  buttonLoginClick(): void {
    alert("just a test");

    const remote = require('electron').remote;
    const BrowserWindow = remote.BrowserWindow;

    var win = new BrowserWindow({ width: 800, height: 600 });
    win.loadURL('./test.html');
  }
}

编译时的错误是说

找不到名称“要求”。

Answer 1

我知道这个问题是在两个月前提出的。但是，由于某些关键字在 Google 上的排名很高。我会解释我是如何让它工作的......

选项1

在您的index.htm文件中，在head元素内添加以下块

<script>
    var electron = require('electron');
</script>

然后你可以在任何 Typescript 文件中声明电子变量，例如，一个组件......

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

declare var electron: any;

@Component({
    ...
})
export class FooComponent {
    bar() {
        var win = new electron.remote.BrowserWindow({ width: 800, height: 600 });
        win.loadURL('https://google.com.au');
    }
}

当您调用该函数时，它会打开一个指向 google 的电子窗口

选项 2

这个选项应该更简洁一些。如果你有一个src\typings.d.ts文件。然后你可以简单地告诉打字稿编译器注册require全局函数......

declare var require: any;

然后你可以require像往常一样使用这个函数