TemplateRef ve ViewContainerRef
Şablonları dinamik olarak işleyin
TemplateRef ve ViewContainerRef, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 4. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Angular Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Angular Academy kursu toplamda 4 dersten oluşur.
Buyruklu Görüntüleme
Bazen içeriği bildirime dayalı olarak değil, program aracılığıyla görüntülemeniz gerekir. Angular, bu düşük seviyeli denetim için TemplateRef ve ViewContainerRef sağlar.
TemplateRef
TemplateRef, bir <ng-template> öğesine yönelik bir başvurudur. Daha sonra örnekleyebileceğiniz işaretlemeyi temsil eder.
tpl = viewChild.required<TemplateRef<unknown>>('tpl');ViewContainerRef
ViewContainerRef, görünümleri DOM'a ekleyebileceğiniz bir konumdur. Orada neyin görüntüleneceğini denetlemek için bunu enjekte edin.
private vcr = inject(ViewContainerRef);createEmbeddedView
İkisini birleştirin: createEmbeddedView, bir TemplateRef'yi bir ViewContainerRef içine örnekler.
this.vcr.createEmbeddedView(this.tpl());Bağlam Aktarma
İkinci bağımsız değişken olarak bir bağlam nesnesi aktarabilirsiniz; bu nesneye let- değişkenleri aracılığıyla erişilebilir.
this.vcr.createEmbeddedView(this.tpl(), {
$implicit: 'Hello',
count: 3
});Görünümleri Temizleme
ViewContainerRef.clear(), oluşturduğu tüm görünümleri kaldırır. Dinamik içeriği açıp kapatmanın yolu budur.
this.vcr.clear();Özel Bir Yapısal Yönerge
Özel yapısal yönergelerin temelinde bu kalıp bulunur. Yönerge her iki başvuruyu da enjekte eder ve koşula bağlı olarak görüntüleme yapar.
@Directive({ selector: '[appUnless]' })
export class UnlessDirective {
private tpl = inject(TemplateRef<unknown>);
private vcr = inject(ViewContainerRef);
}Girdiye Tepki Verme
Yönerge girdisindeki bir ayarlayıcı, görünümün görünüp kaybolmasını sağlamak üzere create/clear işlemlerini yönetir.
@Input() set appUnless(condition: boolean) {
if (!condition) {
this.vcr.createEmbeddedView(this.tpl);
} else {
this.vcr.clear();
}
}Bir Dizine Ekleme
createEmbeddedView, kardeş görünümler arasındaki ekleme sırasını denetlemek için bir dizin kabul eder.
this.vcr.createEmbeddedView(this.tpl(), {}, 0);createComponent
ViewContainerRef, bileşenleri createComponent ile dinamik olarak da örnekleyebilir; bu, ComponentFactoryResolver'ın modern karşılığıdır.
const ref = this.vcr.createComponent(WidgetComponent);
ref.setInput('title', 'Hi');Temizleme
Buyruklu olarak oluşturulan görünümler temizlenmelidir. Ana bilgisayar bileşeninin yok edilmesi ViewContainerRef'yi otomatik olarak temizler; ancak elle açıp kapatırken clear() çağırın.
Hızlı Kontrol
Buyruklu görüntüleme hakkındaki anlayışınızı sınayın.
Özet
TemplateRef'nin şablon işaretlemesine yönelik bir başvuru, ViewContainerRef'nin DOM ekleme noktası ve createEmbeddedView'nin birini diğerine görüntüleyen işlem olduğunu öğrendiniz. Birlikte, özel yapısal yönergeleri ve dinamik bileşenleri mümkün kılarlar.
Sıkça Sorulan Sorular
“TemplateRef ve ViewContainerRef” dersi ücretsiz mi?
Evet — “TemplateRef ve ViewContainerRef” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Angular Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Angular Academy kursu toplamda 4 dersten oluşur.
“TemplateRef ve ViewContainerRef” dersinde ne öğreneceğim?
Şablonları dinamik olarak işleyin Angular Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Angular Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Angular Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 4. dersidir.
“TemplateRef ve ViewContainerRef” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Angular Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Angular Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- Tek Yuvalı İçerik Yansıtma
- select ile Çok Yuvalı Yansıtma
- ng-template ve ng-container
- TemplateRef ve ViewContainerRef