如何将 angular 2+ 应用程序集成到 Openfin 平台 [英] How to integrate angular 2+ app to Openfin platform

问题描述

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

I need to integrate my existing angular 5 app in openfin (specifically using wpf embedded view) . I will need to communicate with the embedded app using the Interapplication bus. I can't find an example of how I can integrate this into my component.

推荐答案

好的 - 我终于想通了.

Ok - I figured this out finally.

要使其正常工作，需要做的事情很少.首先，通过包含@types/openfin - npm 包来告诉打字稿编译器有关类型.您会注意到编辑器将开始识别其智能感知中的类型，但是当您构建应用程序时，打字稿编译器将抛出异常 - '找不到名称 'fin'.

There are few things to do to get this working. First of all, tell typescript compiler about the type by including @types/openfin - npm package. You will notice that the editor will start recognising the type in its intellisense, but when you build the app, the typescript compiler will throw an exception - 'cannot find name 'fin'.

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

To fix this, open up your tsconfig.json and make sure you include either:- 1. Entire @types folder in typeroots 2. fin types within 'types' array.

{.."目标": "es5",类型根":[节点模块/@types"],...}}

{ .. "target": "es5", "typeRoots": [ "node_modules/@types" ], ... } }

在此更改后，应用程序应该可以在没有任何打字稿错误的情况下编译.

After this change, the app should compile without any typescript error.

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

Now, in you app component, you need a way to find whether the app is running under open fin. Once fin variable is available, we can use InterApplication bus and all other openfin goodness. A basic app component might looks like this:-

    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.");
  }

}

这篇关于如何将 angular 2+ 应用程序集成到 Openfin 平台的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！