Question

我已成功将Angular 2（Alpha 44）与D3.js集成：

<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <script src="../node_modules/systemjs/dist/system.src.js"></script>
    <script src="../node_modules/angular2/bundles/angular2.dev.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js" charset="utf-8"></script>
    <script>
      System.config({packages: {'app': {defaultExtension: 'js'}}});
      System.import('app/app');
    </script>
  </head>
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

app.js：

/// <reference path="./../../typings/tsd.d.ts" />

import {Component, bootstrap, ElementRef} from 'angular2/angular2';

@Component({
  selector: 'my-app',
  template: '<h1>D3.js Integrated if background is yellow</h1>',
  providers: [ElementRef]
})
class AppComponent { 
  elementRef: ElementRef;

  constructor(elementRef: ElementRef) {
    this.elementRef = elementRef;
  }

  afterViewInit(){
    console.log("afterViewInit() called");
    d3.select(this.elementRef.nativeElement).select("h1").style("background-color", "yellow");
  }
}
bootstrap(AppComponent);

一切都很好。但ElementRef的Angular 2文档声明如下：

当需要直接访问DOM时，使用此API作为最后的手段。请使用Angular提供的模板和数据绑定。或者，您可以查看Renderer，它提供了可以安全使用的API，即使不支持直接访问本机元素也是如此。依赖于直接DOM访问会在应用程序和渲染层之间产生紧密耦合，这使得无法将两者分开并将应用程序部署到Web工作者。

现在问题是如何将D3.js与Renderer API集成？

Answer 1

您还可以使用@ViewChild()（Angular 2: how control <video> from component）它不会有太大的区别，因为这仍然是直接的DOM访问，这将阻止服务器呈现和在Web工作者中运行。但是像d3这样的图书馆无论如何都无法绕过。

如何使用Angular 2

1 个答案: