angular2: применять класс d3 элемент из стиля компонента

Question

Имея компонент в angular2 где app.component.css определяет класс h-bar:

В app.component.ts, d3 используется для создания элементов, относится класс h-bar от app.component.css.

d3.select("#container").selectAll("div.h-bar") // <- C 
       .data(data) // <- D 
       .enter() // <- E 
       .append("div") // <- F     
       .attr("class", "h-bar")     
       .append("span"); // <- G  

Однако стиль НЕ обрабатывался должным образом. Заглядывая в созданный html, я обнаружил, что случайный _ngcontent-baf-1 (не уверен, что это module.id) отсутствует в тех элементах, которые генерируются d3.

Так что я хотел бы добавить этот атрибут module.id к этому элементу:

// Enter 
      d3.select("#container").selectAll("div.h-bar") // <- C 
       .data(data) // <- D 
       .enter() // <- E 
       .append("div") // <- F   
       .attr(module.id, "")      
       .attr("class", "h-bar")     
       .append("span"); // <- G 

К сожалению, ошибка была брошена в module.id недействительно имя атрибута:

Любая идея, пожалуйста?

Answer 1

Инкапсулированные стили будут работать только для объектов DOM, обрабатываемых угловым.

Я предлагаю выключая инкапсуляции на этом компоненте:

@Component({ 
    ..., 
    encapsulation: ViewEncapsulation.None 
}) 

однако, это будет загрязнять ваши глобальный CSS пространство имен, так что ваши идентификаторы/классы должны быть уникальными для данного компонента.

Чтобы сохранить инкапсуляцию, попробуйте следующее:

constructor(private hostRef: ElementRef) { } 

    ngOnInit() { 
    this.ngContentId = '_ngcontent-' + this.hostRef.nativeElement.attributes[1].name.substr(8); 
    } 

    addStuff(){ 
    d3.select("#container").selectAll("div.h-bar") // <- C 
     .data(data) // <- D 
     .enter() // <- E 
     .append("div") // <- F   
     .attr(this.ngContentId, "") 
     .attr("class", "h-bar") 
     .append("span"); // <- G 
    } 

Это быстро и грязно, я не знаю, если идентификатор хоста всегда attributes[1]. Это может измениться, поэтому вам придется перебирать атрибуты, чтобы найти правильный.