如何在经典HTML5和Angular2应用程序之间共享打字稿类?

Question

我们有一些传统的常规HTML5应用程序使用我们自己的dataviz模块(基于d3.js的javascript lib)。

我们在 angluar2 上启动了一个用打字稿编写的新应用程序，该应用程序也需要包含相同的数据可视化组件。

我已经将数据可视化模块重写为基于 react 的打字稿中的全新库，非常适合 angular2 应用程序。我利用重写的机会，通过更好地集中通用代码来更好地构建数据可视化模块，并使 Web 服务成为基于新 Web 服务打字稿类的角度服务。

我现在面临的问题是，我用两种不同的语言(和技术支持)编写了相同的数据可视化模块，这种情况迫使我们维护两种不同的源代码。

换句话说，是否可以将打字稿版本注入到旧的HTML5/javascript应用程序中？

到目前为止，我想我可以使用 javascript angular2 生成的打字稿语言直接包含在旧版应用程序中。

但是我该如何解决 angular2 装饰命令，例如 @Injectable、@Component、@ViewChild etC. 和导入？

例如，当我包含以下打字稿的js生成的文件时，我得到错误TypeError：undefined不是一个对象(评估'core_1.ViewChild')，它出现在这里：

}; // drawChartTraffic(force)
__decorate([
core_1.ViewChild('chart'), 
__metadata('design:type', core_1.ElementRef)
], DatavizComponent.prototype, "chartContainer", void 0);
__decorate([
core_1.Input(), 
__metadata('design:type', String)
], DatavizComponent.prototype, "graphId", void 0);

我的理解是我应该包括 angular2/core 和所有使用的库，这毫无意义，因为我想实现的是简单......

我应该转向包含数据可视化的 iframe 吗？知道吗？

打字稿摘录：

import { Component, OnInit, OnChanges, ViewChild, ElementRef, Input, ViewEncapsulation } from '@angular/core';
import * as d3 from 'd3';
import { Observable }           from 'rxjs/Observable';
import { ZEENSMetricsService }  from './zeensmetrics.service'

@Component({
selector:    'dataviz-offers-volumes',
templateUrl: 'app/dataviz.component.html',
styleUrls:  ['app/dataviz.component.css'],
encapsulation: ViewEncapsulation.None,
providers: [
{provide: 'wsAuthKey',  useValue: 'abc'}, 
{provide: 'wsHost',     useValue: 'efg'}, 
],
})
export class DatavizComponent implements OnInit, OnChanges {
@ViewChild('chart') private chartContainer: ElementRef;
@Input() private graphId:string;
@Input() private wsAuthKey:string;
@Input() private wsHost:string;
@Input() private maxSamples=12;
private graph: any;     // chartContainer native element
// …
}

Answer 1

由于您的 DatavizComponent 是 Angular 2 组件，因此如果不包含整个 Angular 2 框架，就无法将其包含在旧版应用程序中。

因此，我认为您应该将核心 Dataviz 模块拆分为与框架无关的库。把所有不依赖于 Angular 的代码都放进这个库。导入此库并将其封装在 Angular 组件中。

import {template, styles, Dataviz} from 'my-dataviz-lib';
@Component({
selector: 'dataviz-offers-volumes',
template: template,
styles: styles,
//...
})
export class DatavizComponent implements OnInit, OnChanges {
private viz: Dataviz; // Your library object
// …
}