कोणीय 2 लूप के लिए गतिशील सामग्री/एचटीएमएल लोडिंग

Question

मेरे पास एक जेसन सरणी है जिसमें घटक को लोड करने के लिए घटक या HTML चयनकर्ता हो सकता है। मैं इस डेटा को लूप के अंदर लोड करने की कोशिश कर रहा हूं। जब मैं मूल्य {{d.html}} को अलग करने की कोशिश करता हूं तो यह योजना पाठ के रूप में दिखाई देता है। जब मैं नीचे दिए गए आंतरिक HTML दृष्टिकोण का उपयोग करता हूं और डोम का निरीक्षण करता हूं तो मैं वहां HTML को देखता हूं लेकिन यह एक कस्टम घटक के रूप में व्यवहार नहीं करता है (डोम केवल इसे प्रारंभ करने और घटकों के टेम्पलेट के साथ बदलने के बजाय इसमें शामिल होगा।

मैंने देखा है डायनामिक कंटेंट लोडर पर, लेकिन यह फिट नहीं दिखता है। यह लूप के लिए है और इसलिए टेम्पलेट सिंटैक्स का उपयोग नहीं कर सकता है, इसलिए loadIntoLocation मेरे लिए काम नहीं करेगा। यह भी सुनिश्चित नहीं है कि घटक के पास इनपुट होने पर यह कैसे काम करेगा।

<div *ngFor="#d of dtabs" class="tab-pane" id="tab-{{d.component}}"> 
    <div [innerHTML]="d.html"></div> 
</div> 

Answer 1

मैं भी ऐसा करने के लिए एक तरह से खोज रहा था। मैंने @guyoung जवाब देखा और उस पर आधारित कुछ बनाया। लेकिन फिर, मुझे एहसास हुआ कि DynamicComponentLoader.loadIntoLocation() अब पिछले संस्करण में मौजूद नहीं है, और DynamicComponentLoader पहले से ही बहिष्कृत है।

मैंने कुछ दस्तावेज़ और पोस्ट पढ़े और एक नया निर्देश बनाया जो ठीक काम करता था। देखें:

import { 
 
    Component, 
 
    ComponentResolver, 
 
    Directive, 
 
    ViewContainerRef, 
 
    Input, 
 
    Injector, 
 
    ApplicationRef 
 
} from "@angular/core"; 
 

 
/** 
 

 
    This component render an HTML code with inner directives on it. 
 
    The @Input innerContent receives an array argument, the first array element 
 
    is the code to be parsed. The second index is an array of Components that 
 
    contains the directives present in the code. 
 

 
    Example: 
 

 
    <div [innerContent]="[ 
 
    'Go to <a [routerLink]="[Home]">Home page</a>', 
 
    [RouterLink] 
 
    ]"> 
 

 
**/ 
 
@Directive({ 
 
    selector: '[innerContent]' 
 
}) 
 
export class InnerContent { 
 

 
    @Input() 
 
    set innerContent(content){ 
 
    this.renderTemplate(
 
     content[0], 
 
     content[1] 
 
    ) 
 
    } 
 

 
    constructor(
 
    private elementRef: ViewContainerRef, 
 
    private injector: Injector, 
 
    private app: ApplicationRef, 
 
    private resolver:ComponentResolver){ 
 
    } 
 

 
    public renderTemplate(template, directives) { 
 
    let dynComponent = this.toComponent(template, directives) 
 
    this.resolver.resolveComponent(
 
     dynComponent 
 
    ).then(factory => { 
 
     let component = factory.create(
 
     this.injector, null, this.elementRef._element.nativeElement 
 
    ); 
 

 
     (<any>this.app)._loadComponent(component); 
 
     component.onDestroy(() => { 
 
     (<any>this.app)._unloadComponent(component); 
 
     }); 
 
     return component; 
 
    }); 
 
    } 
 

 
private toComponent(template, directives = []) { 
 
    @Component({ 
 
    selector: 'gen-node', 
 
    template: template, 
 
    directives: directives 
 
    }) 
 
    class DynComponent {} 
 
    return DynComponent; 
 
    } 
 
}

Answer 2

Angular2 गतिशील रूप से खाका प्रस्तुत

import { Component, View, DynamicComponentLoader, ElementRef} from 'angular2/core'; 
import {bootstrap} from 'angular2/platform/browser' 

@Component({ 
    selector: 'some-component', 
    properties: ['greeting'], 
    template: ` 
    <b>{{ greeting }}</b> 
    ` 
}) 
class SomeComponent { } 

@Component({ 
    selector: 'app' 
}) 
@View({ 
    template: ` 
    <h1>Before container</h1> 
    <div #container></div> 
    <h2>After container</h2> 
    ` 
}) 
class App { 
    loader: DynamicComponentLoader; 
    elementRef: ElementRef; 

    constructor(loader: DynamicComponentLoader, elementRef: ElementRef) { 
     this.laoder = loader; 
     this.elementRef = elementRef; 

     // Some async action (maybe ajax response with html in it) 
     setTimeout(() => this.renderTemplate(` 
     <div> 
    <h2>Hello</h2> 
    <some-component greeting="Oh, hey"></some-component> 
     </div> 
    `, [SomeComponent]), 1000); 
    } 

    renderTemplate(template, directives) { 
     this.laoder.loadIntoLocation(
      toComponent(template, directives), 
      this.elementRef, 
      'container' 
     ) 
    } 
} 

function toComponent(template, directives = []) { 
    @Component({ selector: 'fake-component' }) 
    @View({ template, directives }) 
    class FakeComponent { } 

    return FakeComponent; 
} 


bootstrap(App); 

पूर्ण कोड: https://github.com/guyoung/GyPractice-Angular2Advanced/tree/master/apps/dynamically_render_template