Comment intégrer D3.js avec l'API Renderer avec Angular 2

J'ai intégré avec succès Angular 2 (Alpha 44) avec 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); 

Tout fonctionne bien. Mais la documentation Angular 2 pour ElementRef indique ce qui suit:

Utilisez cette API en dernier recours lorsque vous avez besoin d'un accès direct aux DOM. Utilisez les modèles et la liaison de données fournis par Angular à la place. Alternativement, vous consultez Renderer qui fournit une API qui peut être utilisée de manière sécurisée même lorsque l'accès direct aux éléments natifs n'est pas pris en charge. En s'appuyant sur l'accès direct aux DOM, vous créez un couplage étroit entre vos couches d'application et de rendu, ce qui rendra impossible de séparer les deux et de déployer votre application dans un travailleur Web.

Maintenant, pose la question de savoir comment intégrer D3.js à l'API du Renderer ?

Vous pouvez également utiliser @ViewChild() ( Angulaire 2: comment le contrôle <vidéo> du composant ). Il ne fera pas grand chose car il s'agit toujours d'un accès direct aux DOM qui empêchera le rendu du serveur et l'exécution dans les web-workers. Mais avec des bibliothèques comme d3, il n'y a pas moyen de contourner.