Angular2

Question

में घटकों के साथ एक गतिशील टेम्पलेट प्रस्तुत करने के लिए मैंने Load existing components dynamically Angular 2 Final Release जैसे कई स्टैक ओवरफ्लो विकल्पों का प्रयास किया है।

मैं क्या करना चाहता हूं एक AJAX अनुरोध के साथ एक HTML पृष्ठ प्राप्त करें और इस टेम्पलेट को मेरे कस्टम घटक में संकलित/संकलित करें।

मुझे पता चला है कि कोणीय 2 में दो बहिष्कृत घटक हैं और मुझे कंपोनेंट फैक्ट्री रीसोलवर का उपयोग करना होगा।

मेरे पुराने समाधान में मैं HTML को प्रस्तुत करने के लिए बस '[innerHtml]' सेट कर सकता था। अब मुझे एक नया समाधान चाहिए।

कौन मेरी मदद कर सकता है?

page.component.ts

import { Component, ViewChild, ViewContainerRef, ComponentFactory, OnInit, ComponentFactoryResolver } from '@angular/core'; 
import { ActivatedRoute, Params } from '@angular/router'; 


@Component({ 
    selector: "wd-page", 
    templateUrl: "/app/page/page.component.html", 
    providers: [] 
}) 
export class PageComponent implements OnInit { 

    // we need the viewcontainer ref, so explicitly define that, or we'll get back 
    // an element ref. 
    @ViewChild('dynamicChild', { read: ViewContainerRef }) 
    private target: ViewContainerRef; 

    private page = { 
     Source: "<div><h2>Hello world</h2><one-of-my-components></one-of-my-components></div>" 
    } 


    constructor(
     private vcRef: ViewContainerRef, 
     private resolver: ComponentFactoryResolver) { } 


     ngOnInit() { 
      //What code do i need here? 
     } 
} 

<div #dynamicChild></div> 

<!-- Old implementation! 

    <div *ngIf="!showSource" [innerHTML]="page"> 
    </div> 
--> 

Answer 1

समस्या हल Yurzui के लिए धन्यवाद,

https://plnkr.co/edit/TAbupH4si62x10QZ7xuc?p=preview

एक अलग पोस्ट (Angular 2.1.0 create child component on the fly, dynamically) से सामान्य एचटीएमएल outlete कर सकते हैं कस्टम सख्त के साथ टेम्पलेट्स प्रस्तुत करने के लिए इस्तेमाल किया जाना चाहिए उनमें ctives।

मॉड्यूल आयात करने के लिए सभी कस्टम घटकों के साथ आयात करना न भूलें जिन्हें आप प्रस्तुत करना चाहते हैं!

export function createComponentFactory(compiler: Compiler, metadata: Component): Promise<ComponentFactory<any>> { 
const cmpClass = class DynamicComponent {}; 
const decoratedCmp = Component(metadata)(cmpClass); 

// Import the module with required components here 
@NgModule({ imports: [CommonModule, RouterModule, SharedModule], declarations: [decoratedCmp] }) 
class DynamicHtmlModule { } 

return compiler.compileModuleAndAllComponentsAsync(DynamicHtmlModule) 
    .then((moduleWithComponentFactory: ModuleWithComponentFactories<any>) => { 
    return moduleWithComponentFactory.componentFactories.find(x => x.componentType === decoratedCmp); 
    }); 
} 

Answer 2

मैं (जैसे HomeComponent के रूप में) @Yurzui और @Linksonder के समाधान पर अपने खुद के घटकों का उपयोग के लिए छोटे परिवर्तन किए। https://plnkr.co/edit/27x0eg?p=preview

यह मूल रूप से CreateComponentFactory() के अंदर अतिरिक्त आयात के रूप में DynamicHtmlModule में AppModule जोड़ रहा है।

@NgModule({ imports: [AppModule, CommonModule, RouterModule, SharedModule], declarations: [decoratedCmp] }) 
class DynamicHtmlModule { } 

और AppModule

@NgModule({ 
    ... 
    exports: [HomeComponent, AboutComponent], 
    ... 
}) 
export class AppModule { }