如何将angular 2+应用集成到Openfin平台

Question

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

Answer 1

好了--我终于想通了。

要使其正常工作，需要做的事情很少。首先，通过包含@types/openfin - npm包来告诉typescript编译器关于类型的信息。你会注意到编辑器会在它的intellisense中开始识别类型，但是当你构建应用程序时，typescript编译器会抛出一个异常-‘找不到名字'fin’。

要解决这个问题，打开你的tsconfig.json并确保你包括：- 1. typeroots中的整个@types文件夹2. ' types‘数组中的fin类型。

{ .."target"："es5"，"typeRoots"：“节点模块/@类型”，... }}

在此更改之后，应用程序应该会编译，没有任何typescript错误。

现在，在您的应用程序组件中，您需要一种方法来确定应用程序是否在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.");
  }

}