जेनरेट किए गए डीओएम तत्वों में होस्ट विशेषता जोड़ना

Question

मैं डी 3 और कोणीय 2 अल्फा 37 को एकीकृत करने की कोशिश कर रहा हूं (here से शुरू हुआ)। वर्तमान में जो समस्या है, वह यह है कि जेनरेट किए गए डीओएम तत्वों को नकली स्टाइल दृश्य encapsulation में उपयोग की जाने वाली विशेषताओं को प्राप्त नहीं होता है, और इसलिए मैं तत्व के लिए दृश्य encapsulation को सेट किए बिना उन्हें स्टाइल नहीं कर सकता (या मूल, लेकिन मैं बल्कि नकली का उपयोग करेंगे)।

मैं प्रोग्राम के रूप में [1] घटक के अंदर एक तत्व से आवश्यक विशेषता निकालने, और उसके बाद जो काम करता है उत्पन्न तत्वों [2], में जोड़ने में कामयाब रहे, लेकिन यह स्पष्ट रूप से अविश्वसनीय रूप से 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); 
    } 

} 

क्या इस तरह की चीज़ से निपटने के लिए एक अनुशंसित तरीका है (या क्या मुझे कोणीय 2 के बाहर डीओएम के साथ टंकण करना बंद कर देना चाहिए)?

Answer 1

नहीं पूरा जवाब (अभी तक), लेकिन यह एक समाधान खोजने में मदद कर सकते हैं हो सकता है कुछ उपयोगी जानकारी:

• समस्या अभी भी beta.8 में मौजूद है। दृश्य encapsulation को None पर सेट करना और वैश्विक शैलियों का उपयोग करना एकमात्र समाधान था जिसे मैं काम पर ला सकता था। Native का उपयोग करने के परिणामस्वरूप डीओएम में कोई तत्व जोड़ा नहीं जा रहा था, लेकिन मुझे कारण जानने के लिए कुछ और परीक्षण करना होगा।
• ओपी कामों द्वारा प्रस्तावित हैक, और कम से कम मेरी राय में उचित समाधान में दोबारा प्रतिक्रिया दी जा सकती है।
• d3.js के विशिष्ट मामले में, लाइब्रेरी द्वारा आंतरिक रूप से बनाए गए तत्वों को पेश करते समय चीजें और भी मुश्किल हो जाती हैं, उदा। d3.svg नामस्थान में विधियों के माध्यम से। निस्संदेह इसके लिए एक कामकाज भी मिल सकता है।
• मुझे विश्वास है कि यह मुद्दा d3 से बड़ा है। वहां बहुत सारे पुस्तकालय हैं जिनके पास अपनी स्वयं की डोम पीढ़ी/हेरफेर तंत्र है, और यह सोचने के लिए अवास्तविक नहीं है कि उन लोगों का एक हिस्सा किसी अन्य बिंदु पर कुछ या अन्य angular2 एप्लिकेशन में एकीकृत किया जाएगा। इस अर्थ में, यह आश्चर्य की बात है कि यह मुद्दा अभी तक नहीं आया है (या शायद मेरा Google-fu इस हफ्ते विशेष रूप से कमजोर है)।
  1. कि एक आंशिक डोम चलता बाद प्रोसेसर के कुछ प्रकार लागू:

समाधान के संदर्भ में, इन दो दृष्टिकोण है कि मैं वर्तमान मामले में विचार कर रहा हूँ कोई भी अच्छे कुछ के साथ आता है कर रहे हैं पेड़ और शैली के दायरे विशेषताओं को सेट करता है। शायद एक निर्देश के रूप में?

here संकेत के रूप में, प्रस्तुतकर्ता को सजाने की कोशिश करें।