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.

SQL DATEADD() Fonksiyonu(Sql de tarihe ay,gün,yıl ekleme)

Kullanım Kalıbı : DATEADD (datepart , number , date ) . datepart ksımına month,year,day vs artırmak istediğimiz tarih birimini yazıyoruz. . number ksımına arttırmak istediğimiz miktarı yazıyoruz. . date kısmına da hangi tarih e ekleneceğini belirtiyoruz. Örnek olarak şu an ki tarihten 1 ay sonrasını görmek için : Şu anki tarih '10-1-2011' olsun(gün,ay,yıl) Sorgu : SELECT DATEADD(MONTH,+1,GETDATE()) Çıktı alacağımız tarih : '10-2-2011' şekinde olacaktır.

Microsoft SQL Server, Error: 18456

sql server da authentication sorunu. genelde sql server kurulumundan sonra sql serverda bir kullanıcı açıldığında şifre ve kullanıcı adı girmenize rağmen girişi kabul etmez. bu durumda önce kullanıcınızın properties status kısmından enabled olup olmadığına bakın. eğer bu enable ise sql server sunucu üzerinde sağ tuş yapıp properties 'den Security sekmesinden "Sql Server And Windows Authentication Mode" seçilmeli ve ardından sql server servisleri yeniden başlatılmalıdır değişikliklerin kayıt edilmesi için. işte sql server artık hem windows authentication ile hemde sql authentication ile çalışabilir artık. Umarım faydalı olur.