Angular ile çalışırken bazı durumlarda dinamik olarak oluşan ve yönetilen modüler bir alt yapı ihtiyacımız olabilir. Bu ihtiyacımızı karşılayabilmek için angular 'ComponentFactoryResolver' adında bir sınıfa sahip. Bu sınıf aracılığı ile oldukça esnek ve runtime da çalışan dinamik bir yapı hazırlayabiliriz.
Adım Adım Dinamik Modül Sistemi Uygulama
1- Yeni bir proje oluşturuyoruz.
Routing mekanizmasına sahip bir angular uygulamasını console yardımı ile aşağıdaki komutu çalıştırarak uyguluyoruz.
ng new test-dinamik --routing
2 - Örnek Uygulamamızın Kurgusu
Örnek uygulamamızda bir adet mesaj componentini dinamik olarak ilgili sayfamızın içerisine dahil ediyor olacağız. Modülümüzü dinamik yüklerken aynı zamanda @Input() anahtar kelimesi ile child component imize de veri gönderiyor olacağız.
Şimdi Adım Adım İşlemimize Geçeli :
app.component.html
app.component.html dosyamıza aşağdaki gibi bir html ekliyoruz. İlgili html ComponentContainer Id si ile içerisine dinamik olarak bizim yükleyeceğimiz componentleri alıyor olacaktır.
<template #Componentcontainer></template>
app.component.ts
öncelikle app.component.ts dosyamızın constructor u aşağıdaki gibi görünmeli. Constructor ımızda Dinamik çalışmamızı sağlayacak ComponentFactoryResolver nesnemizi dependency injection ile tanımlıyor. Ve hemen üstünde de childcomponent imizin hangi Id ye sahip kontrol içerisine yükleneceğini tanımlıyoruz.
import { Component, ViewChild, ViewContainerRef,
ComponentFactoryResolver, Input } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
@ViewChild('Componentcontainer', { read: ViewContainerRef }) entry: ViewContainerRef;
constructor(private resolver: ComponentFactoryResolver) {
}
}
Message Component imizi dinamik olarak çağırma
createContainerViewModel() {
this.entry.clear();
const factory = this.resolver.resolveComponentFactory(MessageComponent);
let componentRefItem = this.containerEntry.createComponent(factory);
this.componentRef.push(componentRefItem);
this.componentRef.instance.message="hello world";
}