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.

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

Sql Hatası : " The data types ntext and varchar are incompatible in the equal to operator. "

bu sabah böyle bir hata ile karşılaştım ilk defa karşıma çıktı :) Mesela "SELECT * FROM urunler WHERE Aciklama = 'HP NOTEBOOK' " şeklinde bir arama yaptığımızı düşünelim.Eğer "Aciklama" ntext bir tanım ise veri tabanında bu sorgu şu hatayı veriyor : "The data types ntext and varchar are incompatible in the equal to operator." Çözüm Basit :) arama işlemini "LIKE" ile yapıcaksınız :) Bu hatayı zaten kolayca çözüp giderebilirsiniz ama gördüğü her hatayı direk google a yazan arkadaşlar için bir kaynak olsun dedim :D Yeni Sorgu : SELECT * FROM urunler WHERE Aciklama LIKE 'HP NOTEBOOK' Umarım faydalı olmuştur.