कोणीय 2 डीओएम या टेम्पलेट को गतिशील घटक जोड़ें

Question

यदि शो() कहा जाता है तो मैं डोम को गतिशील घटक जोड़ने की योजना बना रहा हूं। मुझे पता है कि इसे छिपाने के लिए ngIf या [छुपा] के साथ एक समाधान है और इसे निर्देश के रूप में उपयोग करें, लेकिन मैं इस समाधान का प्रशंसक नहीं हूं क्योंकि मैं इसे अपने HTML में घोषित नहीं करना चाहता हूं।

import {Component} from 'angular2/core'; 
    import {InfoData} from '../../model/InfoData'; 

    @Component({ 
    selector: 'Info', 
    templateUrl: './components/pipes&parts/info.html', 
    styleUrls: ['./components/pipes&parts/info.css'] 
    }) 

    export class Info{ 
    infoData: InfoData; 

    public show(infoData: InfoData) { 
     this.infoData= infoData; 
     document.body.appendChild(elemDiv); <----- Here? 
    } 
    } 

और फिर मैं इसे एक प्रदाता के रूप में घोषित करता हूं ताकि मैं शो() को कॉल कर सकूं।

import {Component} from 'angular2/core'; 
    import {Info} from './components/pipes&parts/Info'; 

    @Component({ 
    selector: 'Admin', 
    templateUrl: './Admin.html', 
    styleUrls: ['./Admin.css'], 
    directives: [Info], 
    providers: [Info] 
    }) 

    export class Admin { 
    constructor(private info: Info) { 
    info.show(); <---- append the Info Element to DOM 
    } 

Answer 1

मुझे नहीं लगता कि आपको अन्य घटक के लिए प्रदाता के रूप में Info घटक प्रदान करने की आवश्यकता है। मुझे यकीन नहीं है कि यह भी काम करता है। आप Query लाभ उठा सकते हैं और QueryView घटकों एक दूसरे में इस्तेमाल के संदर्भ के लिए:

@Component({ 
    selector: 'Admin', 
    templateUrl: './Admin.html', 
    styleUrls: ['./Admin.css'], 
    directives: [Info] 
}) 
export class Admin{ 
    constructor(private @Query(Info) info: QueryList<Info>) { 
    info.first().show(); <---- append the Info Element to DOM 
    } 
} 

बजाय Info घटक भीतर तत्व जोड़, आप गतिशील रूप से इस घटक DynamicComponentLoader का उपयोग कर के रूप में गुंटर ने सुझाव दिया जोड़ सकते हैं:

@Component({ 
    selector: 'Info', 
    templateUrl: './components/pipes&parts/info.html', 
    styleUrls: ['./components/pipes&parts/info.css'] 
}) 

export class Info{ 
     infoData: InfoData; 

    public show(infoData: InfoData) { 
    this.infoData= infoData; 
    // No need to add the element dynamically 
    // It's now part of the component template 
    // document.body.appendChild(elemDiv); <----- Here? 
    } 
} 

@Component({ 
    selector: 'Admin', 
    //templateUrl: './Admin.html', 
    // To show where the info element will be added 
    template: ` 
    <div #dynamicChild> 
     <!-- Info component will be added here --> 
    </div> 
    `, 
    styleUrls: ['./Admin.css'], 
    directives: [Info] 
}) 
export class Admin{ 
    constructor(private dcl: DynamicComponentLoader, private eltRef:ElementRef) { 
    this._dcl.loadIntoLocation(Info, this._el, 'dynamicChild') 
     .then(function(el) { 
      // Instance of the newly added component 
     }); 
    } 
} 

उम्मीद है कि यह आपकी मदद करता है, थिएरी

Answer 2

अद्यतन

उपयोग ViewContainerRef.createComponent()

• https://angular.io/docs/ts/latest/cookbook/dynamic-component-loader.html
• https://angular.io/docs/ts/latest/api/core/index/ViewContainerRef-class.html#!#createComponent-anchor

एक पूर्ण उदाहरण के लिए देख Angular 2 dynamic tabs with user-click chosen components

मूल

DynamicComponentLoader बहुत पहले

हटा दिया गया था आप इस उद्देश्य के लिए उपयोग कर सकते हैं DynamicComponentLoader, लेकिन यह थोड़ा बोझिल है और बाइंडिंग से संबंधित कुछ मुद्दे हैं।

यह भी देखें:

• http://www.syntaxsuccess.com/viewarticle/loading-components-dynamically-in-angular-2.0
• DynamicComponentLoader breaks Data binding
• DynamicComponentLoader does not support inputs or outputs
• Initial Changedetection not working with DynamicComponentLoader
• Angular2: Two-way data binding on component dynamically inserted using DynamicComponentLoader
• How to provide data to a @Component through DynamicComponentLoader
• Angular2: Creating child components programmatically