在angular2组件

时间:2017-04-15 19:19:56

标签: node.js angular typescript electron

我无法弄清楚如何在我的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');
  }
}

编译时的错误是

  

找不到姓名&#39;要求&#39;。

1 个答案:

答案 0 :(得分:4)

我知道这个问题是在两个月前被问到的。但是,由于某些关键字在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');
    }
}

当你调用该函数时,它会打开一个指向谷歌的电子窗口

选项2

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

declare var require: any;

然后您可以像往常一样使用require功能