Angular2: घटक/HTML तत्व क्लोनिंग और यह कार्यक्षमता

Question

है तो, सवाल काफी सरल है ...

मैं एक मेज और उस पर कुछ कोणीय तर्क (की गणना शैलियों, आदि) है ... विशेष रूप से मैं इस राशि tHS

[class.hidden] = "column.group !== 'key-data' && currentTableView !== column.group" 

मेरी मेज चिपचिपा हेडर कार्यक्षमता के लिए पर मैं मेज और स्थिति यह तय क्लोन करने के लिए की जरूरत है .. एक निर्देश का उपयोग कर, यह (सरलीकृत)

let newTable = element.cloneNode(true); 
body.appendChild(newTable); 

की तरह कुछ करता है कि स्पष्ट रूप से कोणीय तर्क को नएटेबल पर लागू नहीं किया गया है, लेकिन मुझे यह होना चाहिए ...

मैं इसे कैसे कर सकता हूं?

Answer 1

तो मैंने कुछ शोध किया और यही वह है जिसके साथ मैं आया था।

आप इसे कर सकते हैं और यह वास्तव में टेम्पलेट्स और [ngTemplateOutlet] का उपयोग करके कठिन नहीं है। यह यह कैसे काम करता है:

@Component({ 
    selector: 'my-app', 
    template: ` 
    <template #temp> 
     <h1 [ngStyle]="{background: 'green'}">Test</h1> 
     <p *ngIf="bla">Im not visible</p> 
    </template> 
    <template [ngTemplateOutlet]="temp"></template> 
    <template [ngTemplateOutlet]="temp"></template> 
    ` 
}) 

export class AppComponent { 
    bla: boolean = false; 
    @ContentChild('temp') testEl: any; 
} 

तो तुम एक संदर्भ टेम्पलेट बनाने, इसके अंदर अपने तर्क के सभी जोड़ने के लिए, और फिर तुम सिर्फ [ngTemplateOutlet] का उपयोग कर टेम्पलेट के रूप में कई प्रतियां पैदा करते हैं। सभी आंतरिक बाइंडिंग और कोणीय कार्यक्षमता बरकरार रखी जाती है।

यहाँ एक काम plunker है:

http://plnkr.co/edit/jPt5eKUfLUe9FxnLH8bL?p=preview

आप देख मैं *ngIf और [ngStyle] साथ यह परीक्षण किया के रूप में कर सकते हैं कर दिया है और वे अपेक्षा के अनुरूप काम है और मैं किसी भी कारण नहीं दिख रहा है क्यों की किसी भी अन्य प्रकार निर्देश काम नहीं करेगा।

आप *ngFor का भी उपयोग कर सकते हैं लेकिन फिर आपको [ngOutletContext] प्रदान करने की आवश्यकता है।

https://github.com/flauc/ng2-simple-components/blob/master/src/select/select.component.ts