为 Dygraphs 创建 Angular2 component/directive 包装器

Question

我有一个现有的 AngularJS 应用程序，它使用 'wrap' DyGraphs JavaScript 库的指令并且运行良好。

但是，我正在研究向 Angular2 的迁移，并且正在努力创建一个 Angular2 组件（或指令）来包装 DyGraphs，但一直无法找到任何有针对性的帮助。

我看过类似的图表库以及它们是如何包装的，并尝试用 DyGraphs 做同样的事情，但遇到了一些障碍。

对于如何继续执行此任务的任何建议，我将不胜感激，因为在不久的将来，我们可能需要包装许多其他 JS 库，包括来自 Vis 的几个库。

非常感谢。

更新

继 Thierry 的出色回答之后，我重构了代码，如下所示：

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

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:

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 错误。非常感谢收到有关如何解决此问题的任何建议。

Answer 1

您可以通过输入和 @ViewChild 装饰器实现这样的组件：

@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属性中添加指令并定义元素：

@Component({
  tempalte: `
    <dygraph [title]="title"></dygraph>
  `,
  directives: [ DygraphComponent ] 
})
export class SomeComponent {
  title:string = 'some title';
}

为 Dygraphs 创建 Angular2 component/directive 包装器

Creating Angular2 component/directive wrapper for Dygraphs

angular

dygraphs