बनाने के लिए कोणीय 2 गतिशील रूप से जोड़ा routerLink निर्देश

Question

रूप this plunker में देखा, मैं गतिशील मेरी तत्वों में से एक के लिए एक HTML जोड़ रहा है, जो इस करने पर निर्भर करता लेने:

@Component({ 
    selector: 'my-comp', 
    template: `<span [innerHTML]="link"></span>`, 
}) export class MyComponent { 
    private linkContent = '<a routerLink="/my-route">GoTo Route</a>'; 
    private link; 

    constructor(sanitizer: DomSanitizer) { 
     this.link = sanitizer.bypassSecurityTrustHtml(linkContent); 
    } 
} 

यह <a routerLink="/my-route">GoTo Route</a> में परिणाम जा रहा है डीओएम में जोड़ा गया, लेकिन कोणीय इस तत्व पर routerLink निर्देश के बारे में कुछ भी नहीं जानता है, और इसे "बाध्य" नहीं करता है। इसलिए, जब आप लिंक पर क्लिक करते हैं, तो इसके परिणामस्वरूप पुनः बूटस्ट्रैप के साथ पूर्ण पुनः लोड होता है (जो प्लंक में काम नहीं करता है, यह केवल 404 देता है)।

प्रश्न: डीओएम (या इसके भाग, या यहां तक ​​कि एक तत्व) के माध्यम से जाने के लिए कोणीय को कैसे बताना है और यदि आवश्यक हो तो घटक प्रारंभ करना?

Answer 1

कोणीय 2 स्वच्छता को छोड़कर किसी भी तरह से एचटीएमएल को गतिशील रूप से जोड़ा गया संसाधित नहीं करता है।

'<a routerLink="/my-route">GoTo Route</a>' से innerHTML पास कर रहा है, यह स्ट्रिंग को डोम को पास कर रहा है, लेकिन कुछ भी नहीं। कोई routerLink निर्देश तत्काल या लागू नहीं है।

आप HTML गतिशील रूप से जोड़ने के लिए है कि Angular2 बाइंडिंग, निर्देशों, या घटकों का उपयोग करता है की जरूरत है, तो आप एक घटक टेम्पलेट के लिए HTML जोड़ सकते हैं, और Angular 2 dynamic tabs with user-click chosen components