Ana içeriğe atla

Angular Dinamik Component Oluşturma ve Dinamik Componentler ile Çalışma



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";
}



Bu blogdaki popüler yayınlar

Cannot resolve the collation conflict between "Turkish_CI_AS" and "SQL_Latin1_General_CP1_CI_AS" in the equal to operation.

iki ayrı veri tabanı içindeki tablolar ile işlem yapılmak istendiğinde eğer dil sorunu çıkıyor ise sorgumuzun sonuna 'COLLATE TURKISH_CI_AS' sözcüğünü ekleyerek sorunu çözebiliriz.Örnek : SELECT * FROM veritabani1.dbo.URUN u1 INNER JOIN veritabani2.dbo.URUNLER u2 ON u1.kod = u2.kod COLLATE TURKISH_CI_AS umarım faydalı olmuştur.

Logo (LOJECTS.exe ve LOBJECTS.dll) Register İşlemleri

LOBJECTS.dll register işlemi : başlat-> çalıştır -> cmd yazıp konsole ekranına geçiyoruz REGİSTER İÇİN : regsvr32 logoDosyaYolu\LOBJECTS.dll yazıyoruz ve dll imizi register ediyoruz UNREGISTER İÇİN : regsvr32 -u logoDosyaYolu\LOBJECTS.dll ile de unregister edebiliriz. LOBJECTS.exe register işlemi : başlat-> çalıştır -> cmd yazıp konsole ekranına geçiyoruz REGİSTER İÇİN : logoDosyaYolu\LOBJECTS.exe -REGSERVER yazıyoruz ve LOBJECTS.exe mizi register ediyoruz. UNREGISTER İÇİN : logoDosyaYolu\LOBJECTS.exe -UNREGSERVER yazıyoruz ve LOBJECTS.exe mizi unregister ediyoruz. Umarım yararlı olmuştur.

IEnumerable ile List Arasındaki Farklar

Sık kullandığımız iki tip olan IEnumerable ve List tipleri ile ilgili sürekli kullanılmasına rağmen farkının çok bilinmediğini düşünerek bu konuda kısa bir yazı yazmak istedim. Bakalım aralarında farklar nelermiş. IEnumerable bir interface iken, List yine IEnumerable sınıftan türeyen somut ( concrete) bir sınıftır. Arasındaki Farklar :  IEnumerable  - List e göre iteration çok daha hızlıdır. Performans için kullanılabilir.  - Read Only bir tip olduğu için Add, Remove gibi işlemler yapılamaz, IEnumerable ile sadece iteration, sort, filter gibi işlemler yapılabilir.  - Soyut bir class olduğu için istenen tipe somutlaştırılabilir.  - yield tipi ile birlikte kullanılabilir.(Promise veri döndürme,state-machine liste kullanımı)  - Linq sorguları veri tabanı sorgularınızın cevaplarınızı IEnumerable olarak döndürür, bu size siz ilgili IEnumerable list i iterate edene kadar ilgili sorguyu çalıştırmama performansı verir, böylece ilgili listeyi kullanmaya ihtiyacınız olmadığı bir durumda yada k