হালনাগাদ
কৌণিক 5 স্ট্যাকব্লিটজ উদাহরণ
হালনাগাদ
ngComponentOutlet ৪.০.০-বিটা ৩-এ যুক্ত করা হয়েছিল
হালনাগাদ
এমন একটি NgComponentOutletকাজ চলছে যা https://github.com/angular/angular/pull/11235 এর মতো কিছু করে
RC.7
Plunker উদাহরণ RC.7
// Helper component to add dynamic components
@Component({
selector: 'dcl-wrapper',
template: `<div #target></div>`
})
export class DclWrapper {
@ViewChild('target', {read: ViewContainerRef}) target: ViewContainerRef;
@Input() type: Type<Component>;
cmpRef: ComponentRef<Component>;
private isViewInitialized:boolean = false;
constructor(private componentFactoryResolver: ComponentFactoryResolver, private compiler: Compiler) {}
updateComponent() {
if(!this.isViewInitialized) {
return;
}
if(this.cmpRef) {
// when the `type` input changes we destroy a previously
// created component before creating the new one
this.cmpRef.destroy();
}
let factory = this.componentFactoryResolver.resolveComponentFactory(this.type);
this.cmpRef = this.target.createComponent(factory)
// to access the created instance use
// this.compRef.instance.someProperty = 'someValue';
// this.compRef.instance.someOutput.subscribe(val => doSomething());
}
ngOnChanges() {
this.updateComponent();
}
ngAfterViewInit() {
this.isViewInitialized = true;
this.updateComponent();
}
ngOnDestroy() {
if(this.cmpRef) {
this.cmpRef.destroy();
}
}
}
ব্যবহারের উদাহরণ
// Use dcl-wrapper component
@Component({
selector: 'my-tabs',
template: `
<h2>Tabs</h2>
<div *ngFor="let tab of tabs">
<dcl-wrapper [type]="tab"></dcl-wrapper>
</div>
`
})
export class Tabs {
@Input() tabs;
}
@Component({
selector: 'my-app',
template: `
<h2>Hello {{name}}</h2>
<my-tabs [tabs]="types"></my-tabs>
`
})
export class App {
// The list of components to create tabs from
types = [C3, C1, C2, C3, C3, C1, C1];
}
@NgModule({
imports: [ BrowserModule ],
declarations: [ App, DclWrapper, Tabs, C1, C2, C3],
entryComponents: [C1, C2, C3],
bootstrap: [ App ]
})
export class AppModule {}
এছাড়াও কৌণিক.ও ডায়ামমিক কম্পিউটারের লোডার দেখুন
পুরানো সংস্করণ xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
এটি আবার Angular2 RC.5 এ পরিবর্তিত হয়েছে
আমি নীচের উদাহরণটি আপডেট করব তবে এটি ছুটির আগের দিন।
এই প্লাঙ্কার উদাহরণটি দেখায় যে কীভাবে গতিশীলভাবে আরসি 5 তে উপাদান তৈরি করা যায়
আপডেট - ViewContainerRef .createComp घटक () ব্যবহার করুন
DynamicComponentLoaderঅবহেলিত হওয়ার কারণে , পদ্ধতির আবার আপডেট হওয়া দরকার।
@Component({
selector: 'dcl-wrapper',
template: `<div #target></div>`
})
export class DclWrapper {
@ViewChild('target', {read: ViewContainerRef}) target;
@Input() type;
cmpRef:ComponentRef;
private isViewInitialized:boolean = false;
constructor(private resolver: ComponentResolver) {}
updateComponent() {
if(!this.isViewInitialized) {
return;
}
if(this.cmpRef) {
this.cmpRef.destroy();
}
this.resolver.resolveComponent(this.type).then((factory:ComponentFactory<any>) => {
this.cmpRef = this.target.createComponent(factory)
// to access the created instance use
// this.compRef.instance.someProperty = 'someValue';
// this.compRef.instance.someOutput.subscribe(val => doSomething());
});
}
ngOnChanges() {
this.updateComponent();
}
ngAfterViewInit() {
this.isViewInitialized = true;
this.updateComponent();
}
ngOnDestroy() {
if(this.cmpRef) {
this.cmpRef.destroy();
}
}
}
প্লাঙ্কার উদাহরণ আরসি .৪
প্লাঙ্কার উদাহরণ বিটা .১7
আপডেট - লোডনেক্সটটোলোশন ব্যবহার করুন
export class DclWrapper {
@ViewChild('target', {read: ViewContainerRef}) target;
@Input() type;
cmpRef:ComponentRef;
private isViewInitialized:boolean = false;
constructor(private dcl:DynamicComponentLoader) {}
updateComponent() {
// should be executed every time `type` changes but not before `ngAfterViewInit()` was called
// to have `target` initialized
if(!this.isViewInitialized) {
return;
}
if(this.cmpRef) {
this.cmpRef.destroy();
}
this.dcl.loadNextToLocation(this.type, this.target).then((cmpRef) => {
this.cmpRef = cmpRef;
});
}
ngOnChanges() {
this.updateComponent();
}
ngAfterViewInit() {
this.isViewInitialized = true;
this.updateComponent();
}
ngOnDestroy() {
if(this.cmpRef) {
this.cmpRef.destroy();
}
}
}
প্লাঙ্কার উদাহরণ বিটা .১7
মূল
আপনার প্রয়োজনীয়তাগুলি কী তা আপনার প্রশ্ন থেকে সম্পূর্ণ নিশ্চিত নয় তবে আমি মনে করি এটি আপনার যা চান তা করা উচিত।
Tabsকম্পোনেন্ট পাস ধরনের একটি অ্যারের পায় এবং এটি অ্যারের মধ্যে প্রতিটি আইটেমের জন্য "ট্যাব" তৈরি করে।
@Component({
selector: 'dcl-wrapper',
template: `<div #target></div>`
})
export class DclWrapper {
constructor(private elRef:ElementRef, private dcl:DynamicComponentLoader) {}
@Input() type;
ngOnChanges() {
if(this.cmpRef) {
this.cmpRef.dispose();
}
this.dcl.loadIntoLocation(this.type, this.elRef, 'target').then((cmpRef) => {
this.cmpRef = cmpRef;
});
}
}
@Component({
selector: 'c1',
template: `<h2>c1</h2>`
})
export class C1 {
}
@Component({
selector: 'c2',
template: `<h2>c2</h2>`
})
export class C2 {
}
@Component({
selector: 'c3',
template: `<h2>c3</h2>`
})
export class C3 {
}
@Component({
selector: 'my-tabs',
directives: [DclWrapper],
template: `
<h2>Tabs</h2>
<div *ngFor="let tab of tabs">
<dcl-wrapper [type]="tab"></dcl-wrapper>
</div>
`
})
export class Tabs {
@Input() tabs;
}
@Component({
selector: 'my-app',
directives: [Tabs]
template: `
<h2>Hello {{name}}</h2>
<my-tabs [tabs]="types"></my-tabs>
`
})
export class App {
types = [C3, C1, C2, C3, C3, C1, C1];
}
প্লাঙ্কার উদাহরণ বিটা .১৫ (আপনার প্লঙ্কারের উপর ভিত্তি করে নয়)
পাশাপাশি ডেটা পাস করার একটি উপায় রয়েছে যা গতিশীলভাবে তৈরি উপাদানগুলিতে যেমন someDataপাস করতে পারে (যেমন পাস করার দরকার হবে type)
this.dcl.loadIntoLocation(this.type, this.elRef, 'target').then((cmpRef) => {
cmpRef.instance.someProperty = someData;
this.cmpRef = cmpRef;
});
ভাগ করা পরিষেবার সাথে নির্ভরতা ইনজেকশন ব্যবহার করার জন্য কিছু সমর্থনও রয়েছে।
আরও তথ্যের জন্য https://angular.io/docs/ts/latest/cookbook/dynamic-comp घटक- loader.html দেখুন