为Dygraphs创建Angular2组件/指令包装 [英] Creating Angular2 component/directive wrapper for Dygraphs
问题描述
我有一个现有的AngularJS应用程序，该应用程序使用指令来包装" DyGraphs JavaScript库，并且运行良好.
I have an existing AngularJS application which uses a directive to 'wrap' the DyGraphs JavaScript library and that works well.
但是，我正在研究向Angular2的迁移，并且正在努力创建一个Angular2组件(或指令)来包装DyGraphs，但一直找不到任何有针对性的帮助.
However, I'm investigating migration to Angular2 and am struggling to create an Angular2 component (or directive) to wrap DyGraphs and have been unable to find any targeted help.
我研究了类似的图表库，以及如何包装它们，并尝试对DyGraphs进行同样的处理，但遇到了许多障碍.
I've looked at similar charting libraries and how these have been wrapped and attempted to do the same with DyGraphs but hit a number of hurdles.
对于任何有关如何执行此任务的建议，我将不胜感激，因为在不久的将来，我们可能需要包装许多其他JS库，包括Vis中的一些.
I'd be grateful for any advice on how to proceed with this task as it's likely that we'll need to wrap a number of other JS libraries including several from Vis in the near future.
非常感谢.
更新
根据Thierry的回答，我重构了如下代码:
Further to Thierry's great answer, I've refactored the code as shown below:
index.html:
index.html:
<html>
<head>
<title>My Application</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- dygraph -->
<script src="node_modules/dygraphs/dygraph-combined.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
app/app.component.ts
app/app.component.ts
import { Component } from '@angular/core';
import { DygraphComponent } from './dygraph.component';
@Component({
template: `
<dygraph [title]="title"></dygraph>
`,
directives: [ DygraphComponent ]
})
export class AppComponent {
title:string = 'some title';
}
app/dygraph.component.ts:
app/dygraph.component.ts:
import { Component, Input, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
declare var Dygraph:any;
@Component({
selector: 'dygraph',
template: `
<div #graph></div>
`
})
export class DygraphComponent implements AfterViewInit {
@ViewChild('graph')
elt:ElementRef;
@Input()
title:string;
ngAfterViewInit() {
new Dygraph(this.elt.nativeElement, "data.txt", {});
}
}
但是，当我尝试运行代码时，我在traceur上收到404错误.非常感谢收到有关如何解决此问题的任何建议.
However, when I try to run the code, I get a 404 error on traceur. Any suggestions on how to resolve this very gratefully received.
推荐答案
您可以通过输入和 @ViewChild 装饰器来实现这样的组件:
You could implement such component with inputs and the @ViewChild decorator this way:
@Component({
selector: 'dygraph',
template: `
<div #graph></div>
`
})
export class DygraphComponent {
@ViewChild('graph')
elt:ElementRef;
@Input()
title:string;
(...)
ngAfterViewInit() {
new Dygraph(this.elt.nativeElement, "ny-vs-sf.txt", {
legend: this.legend,
title: this.title,
(...)
});
}
}
然后将指令添加到要使用它的组件的 directives 属性中并定义元素:
Then add the directive in the directives attribute of the component you want to use it and define the element:
@Component({
tempalte: `
<dygraph [title]="title"></dygraph>
`,
directives: [ DygraphComponent ]
})
export class SomeComponent {
title:string = 'some title';
}
这篇关于为Dygraphs创建Angular2组件/指令包装的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
