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

Question

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

Answer 1

好的 - 我终于想通了。

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

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

{ .. "目标"： "ES5"， "类型根"：[ "node_modules/@types" ], ... } }

此更改后，应用应编译时没有任何打字稿错误。

现在，在您的应用程序组件中，您需要一种方法来查找应用程序是否在 open fin 下运行。一旦 fin 变量可用，我们就可以使用应用程序间总线和所有其他 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.");
}
}