2016-11-07 30 views
5

के साथ आंतरिक HTML को गतिशील रूप से जोड़ने के लिए मैं घटक पुस्तकालय के लिए दस्तावेज़ बना रहा हूं। मुझे 1 स्ट्रिंग एचटीएमएल चाहिए जो पेज पर घटक और इसके लिए दस्तावेज़ दोनों उत्पन्न करता है।कोणीय 2 घटक

मुझे क्या करना चाहते हैं:

enter image description here

मैं क्या है:

enter image description here

जब मैं एचटीएमएल का निरीक्षण किया, मेरे बटन टैग नहीं मौजूद हैं। जब मैं आंतरिक HTML का उपयोग करता हूं तो उन्हें बाहर निकाला जा रहा है।

मेरे घटक कोड:

private flatButtons = `<div class="button-wrapper"> 
     <my-button [type]="'default'" [raised]="false">Default</my-button> 
    </div> 
    <div class="button-wrapper"> 
     <my-button [type]="'primary'" [raised]="false">Primary</my-button> 
    </div> 
    <div class="button-wrapper"> 
     <my-button [type]="'success'" [raised]="false">Success</my-button> 
    </div> 
    <div class="button-wrapper"> 
     <my-button [type]="'info'" [raised]="false">Info</my-button> 
    </div> 
    <div class="button-wrapper"> 
     <my-button [type]="'warning'" [raised]="false">Warning</my-button> 
    </div> 
    <div class="button-wrapper"> 
     <my-button [type]="'danger'" [raised]="false">Danger</my-button> 
    </div>` 

constructor() {} 

getCode() { 
    return html_beautify(this.flatButtons, this.options) 
} 

मेरे HTML टेम्पलेट:

<div class="row"> 
<div class="col-sm-6 col-xs-12"> 
    <mi-card title="Flat Buttons" baCardClass="with-scroll button-panel"> 
    <div id="flatButtons" [innerHTML]="getCode()"> 
    </div> 
    </mi-card> 
</div> 
<div class="col-sm-6 col-xs-12"> 
    <pre>{{getCode()}}</pre> 
</div> 

+0

आपको क्या होने की उम्मीद करते हैं

मैं एक गूंगा घटक बनाया? –

+0

मुझे "मैं क्या चाहता हूं:" – collinglass

+0

ठीक है, तो आप उम्मीद करते हैं कि जोड़ा गया HTML वास्तविक कोणीय घटकों बनने की अपेक्षा करता है। यह इस तरह से काम नहीं करता है। मेरा जवाब देखें –

उत्तर

4

कोणीय प्रक्रिया एचटीएमएल गतिशील रूप में नहीं जोड़ा गया है, यह सिर्फ कहते हैं यह शब्दशः सुरक्षा को रोकने के लिए कुछ सफ़ाई को छोड़कर करता है मुद्दे। एचटीएमएल को अलग करने के sanitizer को रोकने के लिए In RC.1 some styles can't be added using binding syntax देखें।

आप ViewContainerRef.createComponent() का उपयोग Angular 2 dynamic tabs with user-click chosen components में दिखाए गए अनुसार घटकों को गतिशील रूप से जोड़ने के लिए कर सकते हैं।

वहाँ भी गतिशील घटक बनाने का तरीका Equivalent of $compile in Angular 2

0

में दिखाया गया है की तरह है, क्योंकि यह मेरे सवाल का जवाब मैं Gunter के जवाब को स्वीकार करेंगे उपलब्ध समाधान कर रहे हैं।

रुचि रखने वालों के लिए, जिस तरह से मैंने अपनी समस्या हल की, वह एक घटक बनाकर और इसकी आवश्यकता थी।

import {Component} from '@angular/core'; 


@Component({ 
    selector: 'flat-buttons', 
    template: require('./flatButtons.html'), 
}) 
export class FlatButtons { 

    constructor() { 
    } 
} 

और फिर मेरी संशोधित html टेम्पलेट:

<div class="col-sm-6 col-xs-12"> 
    <mi-card title="Flat Buttons" baCardClass="with-scroll button-panel"> 
    <flat-buttons></flat-buttons> 
    </mi-card> 
</div> 
<div class="col-sm-6 col-xs-12"> 
    <h3>Code Snippet</h3> 
    <div class="well"> 
    <pre>{{getFlatButtons()}}</pre> 
    </div> 
</div> 

और मेरे संशोधित घटक कोड:

private flatButtons = require('./components/flatButtons/flatButtons.html') 

constructor() {} 

getFlatButtons() { 
    return html_beautify(this.flatButtons, this.options) 
} 
+0

कॉलिंगलास, आपका flatButtons.html कैसे करता है हमशक्ल? क्या आप साझा कर सकते हैं? – user1892775

संबंधित मुद्दे