কৌনিক সংস্করণ আমি ব্যবহার করেছি - কৌণিক 4.2.0
কৌণিক 4 হয় নিয়ে এসেছেন ComponentFactoryResolver রানটাইম এ লোড উপাদান রয়েছে। এটি এক ধরণের একই ধরণের বাস্তবায়ন Ang কৌনিক 1.0 তে সংকলন করে যা আপনার প্রয়োজনকে পরিবেশন করে
এই নীচের উদাহরণে আমি লোড করছি ড্যাশবোর্ডটিলে কম্পিউটারে ইমেজ উইজেট উপাদানটি গতিশীলভাবে
কোনও উপাদান লোড করতে আপনার একটি নির্দেশিকা দরকার যা আপনি এনজি-টেম্পলেটটিতে প্রয়োগ করতে পারেন যা গতিশীল উপাদানটি রাখতে সহায়তা করবে
WidgetHostDirective
import { Directive, ViewContainerRef } from '@angular/core';
@Directive({
selector: '[widget-host]',
})
export class DashboardTileWidgetHostDirective {
constructor(public viewContainerRef: ViewContainerRef) {
}
}
এই নির্দেশটি ইনজেকশন দেয় উপাদানটির দৃশ্যের ধারকটিতে অ্যাক্সেস পেতে ভিউকন্টেইনরফকে দেয় যা গতিশীলভাবে যুক্ত উপাদানটিকে হোস্ট করবে।
ড্যাশবোর্ডটাইল কম্পোনেন্ট (গতিশীল উপাদান রেন্ডার করার জন্য স্থানধারক উপাদান)
এই উপাদানটি কোনও ইনপুট গ্রহণ করে যা পিতামাত্ত্বিক উপাদানগুলি থেকে আসে বা আপনি আপনার প্রয়োগের ভিত্তিতে আপনার পরিষেবা থেকে লোড করতে পারেন। এই উপাদানগুলি রানটাইমে উপাদানগুলি সমাধান করতে প্রধান ভূমিকা পালন করছে। এই পদ্ধতি আপনি কি আপনার নামে একটি পদ্ধতি দেখতে পারেন ) renderComponent ( যা পরিণামে সঙ্গে একটি পরিষেবা এবং সমাধান থেকে উপাদান নাম লোড 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
}
}
}
ইমেজটেক্সট উইজেট কম্পোনেন্ট (উপাদানটি আমরা রানটাইমের সময় লোড করছি)
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() { }
}
যোগ করুন অবশেষে এন্ট্রি কম্পোনেন্ট হিসাবে আপনার অ্যাপ্লিকেশন মডিউলে এই ইমেজটেক্সট উইজেটকম্পোন্টটি যুক্ত করুন
@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;
}
আমার ব্লগ থেকে মূল রেফারেন্স
অফিসিয়াল ডকুমেন্টেশন
নমুনা উত্স কোড ডাউনলোড করুন