Question

我有一个现有的AngularJS应用程序，该应用程序使用一个指令“包装”DyGraphs JavaScript库并且运行良好。

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

我已经看过类似的图表库以及这些图表如何被包装并试图对DyGraphs做同样的事情，但遇到了一些障碍。

我很感激有关如何继续执行此任务的任何建议，因为我们可能需要在不久的将来包装一些其他JS库，包括Vis中的几个。

非常感谢提前。

更新

除了蒂埃里的好答案之外，我还重构了如下所示的代码：

的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.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';
}

应用程序/ 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组件/指令包装器

1 个答案: