कोणीय संस्करण मैंने इस्तेमाल किया है - कोणीय 4.2.0
कोणीय 4 घटक समय पर घटकों को लोड करने के लिए ComponentFactoryResolver के साथ आया है। यह $ संकलन का एक समान कार्यान्वयन है Angular 1.0 में जो आपकी आवश्यकता को पूरा करता है
इस नीचे उदाहरण में मैं एक डैशबोर्ड TileComponent में गतिशील रूप से ImageWidget घटक लोड कर रहा हूं
एक घटक को लोड करने के लिए आपको एक निर्देश की आवश्यकता होती है जिसे आप एनजी-टेम्पलेट पर लागू कर सकते हैं जो गतिशील घटक को रखने में मदद करेगा
WidgetHostDirective
import { Directive, ViewContainerRef } from '@angular/core';
@Directive({
selector: '[widget-host]',
})
export class DashboardTileWidgetHostDirective {
constructor(public viewContainerRef: ViewContainerRef) {
}
}
यह निर्देश गतिशील रूप से जोड़े गए घटक को होस्ट करने वाले तत्व के दृश्य कंटेनर तक पहुंच प्राप्त करने के लिए ViewContainerRef को इंजेक्ट करता है।
DashboardTileComponent (डायनामिक घटक रेंडर करने के लिए स्थान धारक घटक)
यह घटक एक इनपुट को स्वीकार करता है जो मूल घटक से आ रहा है या आप अपने कार्यान्वयन के आधार पर अपनी सेवा से लोड कर सकते हैं। यह घटक रनटाइम पर घटकों को हल करने के लिए प्रमुख भूमिका निभा रहा है। इस पद्धति में आप रेंडरकंपोनेंट () नाम की एक विधि भी देख सकते हैं जो अंततः घटक नाम को एक सेवा से लोड करती है और ComponentFactoryResolver के साथ हल करती है और अंत में गतिशील घटक को डेटा सेट करती है।
import { Component, Input, OnInit, AfterViewInit, ViewChild, ComponentFactoryResolver, OnDestroy } from '@angular/core';
import { DashboardTileWidgetHostDirective } from './DashbardWidgetHost.Directive';
import { TileModel } from './Tile.Model';
import { WidgetComponentService } from "./WidgetComponent.Service";
@Component({
selector: 'dashboard-tile',
templateUrl: 'app/tile/DashboardTile.Template.html'
})
export class DashboardTileComponent implements OnInit {
@Input() tile: any;
@ViewChild(DashboardTileWidgetHostDirective) widgetHost: DashboardTileWidgetHostDirective;
constructor(private _componentFactoryResolver: ComponentFactoryResolver,private widgetComponentService:WidgetComponentService) {
}
ngOnInit() {
}
ngAfterViewInit() {
this.renderComponents();
}
renderComponents() {
let component=this.widgetComponentService.getComponent(this.tile.componentName);
let componentFactory = this._componentFactoryResolver.resolveComponentFactory(component);
let viewContainerRef = this.widgetHost.viewContainerRef;
let componentRef = viewContainerRef.createComponent(componentFactory);
(<TileModel>componentRef.instance).data = this.tile;
}
}
DashboardTileComponent.html
<div class="col-md-2 col-lg-2 col-sm-2 col-default-margin col-default">
<ng-template widget-host></ng-template>
</div>
WidgetComponentService
यह सभी घटकों को पंजीकृत करने के लिए एक सेवा कारखाना है जिसे आप गतिशील रूप से हल करना चाहते हैं
import { Injectable } from '@angular/core';
import { ImageTextWidgetComponent } from "../templates/ImageTextWidget.Component";
@Injectable()
export class WidgetComponentService {
getComponent(componentName:string) {
if(componentName==="ImageTextWidgetComponent"){
return ImageTextWidgetComponent
}
}
}
ImageTextWidgetComponent (घटक हम रनटाइम पर लोड कर रहे हैं)
import { Component, OnInit, Input } from '@angular/core';
@Component({
selector: 'dashboard-imagetextwidget',
templateUrl: 'app/templates/ImageTextWidget.html'
})
export class ImageTextWidgetComponent implements OnInit {
@Input() data: any;
constructor() { }
ngOnInit() { }
}
अंत में प्रविष्टि के रूप में अपने App मॉड्यूल में इस ImageTextWidgetComponent को जोड़ें
@NgModule({
imports: [BrowserModule],
providers: [WidgetComponentService],
declarations: [
MainApplicationComponent,
DashboardHostComponent,
DashboardGroupComponent,
DashboardTileComponent,
DashboardTileWidgetHostDirective,
ImageTextWidgetComponent
],
exports: [],
entryComponents: [ImageTextWidgetComponent],
bootstrap: [MainApplicationComponent]
})
export class DashboardModule {
constructor() {
}
}
TileModel
export interface TileModel {
data: any;
}
मेरे ब्लॉग से ओरिजिनल रेफरेंस
आधिकारिक दस्तावेज
नमूना स्रोत कोड डाउनलोड करें