मैंने कई स्टैक ओवरफ्लो विकल्पों की कोशिश की है मौजूदा घटकों को गतिशील रूप से कोणीय 2 अंतिम रिलीज लोड करें.
मैं क्या करना चाहता हूं एजेक्स अनुरोध के साथ एक HTML पृष्ठ प्राप्त करें और इस टेम्पलेट को मेरे कस्टम घटक में प्रस्तुत / संकलित करें।
मुझे पता चला है कि कोणीय 2 में दो बहिष्कृत घटक हैं और मुझे इसका उपयोग करना है ComponentFactoryResolver.
मेरे पुराने समाधान में मैं 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>
-->
उत्तर:
जवाब के लिए 8 № 1मुसीबत हल किया यूर्ज़ुई के लिए धन्यवाद
https://plnkr.co/edit/TAbupH4si62x10QZ7xuc?p=preview
एक अलग पोस्ट से सामान्य HTML आउटलेट (कोणीय 2.1.0 गतिशील रूप से फ्लाई पर बाल घटक बनाते हैं) का उपयोग कस्टम निर्देशों के साथ टेम्पलेट्स प्रस्तुत करने के लिए किया जा सकता है।
एक आयात करने के लिए मत भूलना मॉड्यूल उन सभी कस्टम घटकों के साथ जिन्हें आप प्रस्तुत करना चाहते हैं!
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);
});
}
उत्तर № 2 के लिए 1
मैंने बनाया अपने स्वयं के घटकों का उपयोग करने के लिए छोटे बदलाव (जैसे होमकंपोनेंट) @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 { }