生成されたDOM要素にホスト属性を追加する

Question

d3とangular2 alpha.37（hereから開始）を統合しようとしています。私が現在持っている問題は、生成されたDOM要素がエミュレートされたスタイリングビューのカプセル化で使用される属性を取得しないため、要素のビューカプセル化をNone（またはNative）に設定せずにスタイルを設定できないことですむしろエミュレートされたものを使うだろう）。

私は仕事をしている、プログラム[2] [1]成分内側要素から必要な属性を抽出し、その後、生成された要素に追加するために管理、これは明らかに非常にハックである：

import {Component, View, Attribute, ElementRef, LifecycleEvent} from 'angular2/angular2'; 

import d3 from 'd3'; 

@Component({ 
    selector: 'bar-graph', 
    properties: [ 'data' ] 
}) 
@View({ 
    template: '<div class="chart"></div>', 
    styles: [`.chart { 
    background: #eee; 
    padding: 3px; 
    } 

    div.bar { 
    width: 0; 
    transition: all 1s ease-out; 
    -moz-transition: all 1s ease-out; 
    -webkit-transition: all 1s ease-out; 
    } 

    div.bar { 
    font: 10px sans-serif; 
    background-color: steelblue; 
    text-align: right; 
    padding: 3px; 
    margin: 5px; 
    color: white; 
    box-shadow: 2px 2px 2px #666; 
    }`] 
}) 
export class BarGraph implements LifecycleEvent.OnChanges { 
    data: Array<number>; 
    divs: any; 
    constructor(elementRef: ElementRef, @Attribute('width') width: string, @Attribute('height') height: string) { 


    var el:any = elementRef.nativeElement; 
    var graph:any = d3.select(el); 

    this.hostAttr = graph[0][0].children[0].attributes[1].name; //hack here [1] 

    this.divs = graph. 
     select('div.chart'). 
     style({ 
     'width': width + 'px', 
     'height': height + 'px', 
     }). 
     selectAll('div.bar'); 

    } 

    render(newValue) { 
    if (!newValue) return; 

    this.divs.data(newValue) 
     .enter().append('div') 
      .classed('bar', true) 
      .attr(this.hostAttr, true) //add the attribute here [2] 
      .style('width', d => d + '%') 
      .text(d => d + '%'); 

    } 

    onChanges() { 
    this.render(this.data); 
    } 

} 

このようなことに対処するための推奨される方法はありますか（または、Angular2以外のDOMを使っていなくてもよいですか）。

Answer 1

ない完全な答えは（まだ）が、解決策を見つけるのに役立つことができますおそらくいくつかの便利な情報：

• 問題はまだbeta.8に存在します。ビューのカプセル化をNoneに設定し、グローバルスタイルを使用することは私が働くことができる唯一の解決策でした。 Nativeを使用すると、DOMに要素がまったく追加されないように見えましたが、原因を突き止めるためにいくつかのテストを行う必要があります。
• OPによって提案されたハックが動作し、少なくとも私の意見では、合理的な解決策にリファクタリングすることができます。
• d3.jsという特定のケースでは、ライブラリによって内部的に作成された要素を導入すると、さらに難しくなります。 d3.svg名前空間のメソッドを使用します。間違いなくその回避策も見付かることでしょう。
• しかし、この問題はd3よりも大きいと思います。そこには、独自のDOM生成/操作メカニズムを持つライブラリがたくさんありますが、それらの一部がある時点で一部または他のアプリケーションに統合されると考えるのは現実的ではありません。angular2その意味で、問題がまだ起きていないように見えるのは驚くべきことです（または、おそらく私のGoogle-fuは今週は特に弱いです）。
  1. は部分DOMを歩くポストプロセッサのいくつかの並べ替えを実装します
  ソリューションの面では

、これらは、私は現在ケースで検討している2つのアプローチは、誰がよりよい何かを思いつくんですスタイルスコープ属性を設定します。たぶん指令として？

ヒントhereのように、レンダラーをデコレートしてみてください。