如何将 Angular 2+ 应用程序集成到 Openfin 平台

Question

我需要在 openfin 中集成我现有的 angular 5 应用程序（特别是使用 wpf 嵌入式视图）。我将需要使用 Interapplication 总线与嵌入式应用程序进行通信。我找不到如何将其集成到我的组件中的示例。

Answer 1

好的，我终于想通了。

几乎没有什么事情可以做。首先，通过包含 @types/openfin - npm 包来告诉 typescript 编译器类型。您会注意到编辑器将开始识别其智能感知中的类型，但是当您构建应用程序时，打字稿编译器会抛出异常 - '找不到名称'fin'。

要解决此问题，请打开您的 tsconfig.json 并确保您包含以下任一：- 1. typeroots 中的整个@types 文件夹 2. 'types' 数组中的鳍类型。

{ .. “目标”：“es5”， “类型根”：[ “node_modules/@types” ], ... } }

进行此更改后，应用程序应该可以编译而不会出现任何打字稿错误。

现在，在您的应用程序组件中，您需要一种方法来确定应用程序是否在 open fin 下运行。一旦 fin 变量可用，我们就可以使用 InterApplication 总线和所有其他 openfin 优点。一个基本的应用程序组件可能如下所示：-

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

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

  private _mainWin: fin.OpenFinWindow;

  constructor() {
    this.init();
  }

  init() {
    try {
      fin.desktop.main(() => this.initWithOpenFin());

    } catch (err) {
      this.initNoOpenFin();
    }
  };

  initWithOpenFin() {
    this._mainWin = fin.desktop.Window.getCurrent();

    fin.desktop.System.getVersion(function (version) {
      try {
        this.version = "OpenFin version " + version;
      } catch (err) {
        //---
      }
    });

  }

  initNoOpenFin() {
    alert("OpenFin is not available - you are probably running in a browser.");
  }

}