Aggiunta dell'attributo host agli elementi DOM generati

Question

Sto cercando di integrare d3 e angular2 alpha.37 (avviato da here). Il problema che sto avendo attualmente è che gli elementi DOM generati non ottengono gli attributi utilizzati nell'incapsulamento della vista dello stile emulato, e quindi non posso modificarli senza impostare l'incapsulamento della vista per l'elemento su Nessuno (o Nativo, ma io preferirei usare emulato).

sono riuscito a estrarre programmazione L'attributo richiesto da un elemento all'interno del componente [1], e quindi aggiungere agli elementi generati [2], che funziona, ma questo è chiaramente incredibilmente hacky:

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); 
    } 

} 

Esiste un modo consigliato per gestire questo tipo di cose (o dovrei smettere di armeggiare con il DOM al di fuori di Angular2)?

Answer 1

Non è una risposta completa (ancora), ma forse alcune informazioni utili che possono aiutare a trovare una soluzione:

• Il problema esiste ancora in beta.8. L'impostazione dell'incapsulazione della vista su None e l'utilizzo di stili globali era l'unica soluzione che potevo ottenere per funzionare. L'utilizzo di Native sembrava non comportare alcun elemento aggiunto al DOM, ma dovrei fare qualche altro test per capire la causa.
• L'hack proposto da OP funziona, e potrebbe essere ridimensionato in una soluzione ragionevole, almeno secondo me.
• Nel caso specifico di d3.js, le cose diventano ancora più complicate quando si introducono elementi creati internamente dalla libreria, ad es. attraverso i metodi nello spazio dei nomi d3.svg. Indubbiamente si potrebbe trovare anche una soluzione alternativa.
• Tuttavia, il problema è maggiore di d3. Ci sono un sacco di librerie là fuori che hanno i loro meccanismi di manipolazione/manipolazione DOM, e non è irrealistico pensare che una parte di questi sarà ad un certo punto integrata in alcune o altre applicazioni angular2. In questo senso, è sorprendente che il problema non sembra essere ancora uscito (o forse il mio Google-fu è particolarmente debole questa settimana).

In termini di soluzioni, questi sono i due approcci che sto valutando nel caso in cui non si esce con qualcosa di più bello:

1. attuare una sorta di post-processor che cammina un DOM parziali albero e imposta gli attributi dello scope di stile. Forse come una direttiva?
2. Prova a decorare il renderer, come suggerito here.