Angular Academy · Ders

AfterView ve AfterContent Kancaları

Görünüm ve içerik başlatıldıktan sonra mantığı çalıştırın.

AfterView ve AfterContent Kancaları, 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.

Görünüm ve İçerik

Angular, bir bileşenin görünümünü (kendi şablonunu) ng-content aracılığıyla bileşene aktarılan içerikten ayırır. Her biri için ayrı kancalar çalışır.

AfterViewInit

AfterViewInit kancası, bileşen görünümü ve alt görünümleri tamamen başlatıldıktan sonra bir kez çalışır. Görünüm alt öğelerine erişmek için doğru zaman budur.

import { AfterViewInit } from "@angular/core";

export class DemoComponent implements AfterViewInit {
  ngAfterViewInit(): void {
    console.log("view ready");
  }
}

ViewChild'a Erişme

Bir şablon öğesine ait @ViewChild başvurusu, daha önce değil, ngAfterViewInit içinde güvenilir biçimde kullanılabilir.

@ViewChild("input") input!: ElementRef;

ngAfterViewInit() {
  this.input.nativeElement.focus();
}

AfterViewChecked

AfterViewChecked kancası, bileşen görünümünün her denetiminden sonra çalışır. Sık tetiklendiği için yaptığı işi en aza indirin.

ngAfterViewChecked() {
  // runs after each view check
}

AfterContentInit

AfterContentInit kancası, ng-content ile aktarılan içerik başlatıldıktan sonra bir kez çalışır.

import { AfterContentInit } from "@angular/core";

export class CardComponent implements AfterContentInit {
  ngAfterContentInit() {
    console.log("projected content ready");
  }
}

ContentChild'a Erişme

Aktarılan içeriği sorgulamak için @ContentChild kullanın. Başvuru, ngAfterContentInit içinde kullanılabilir.

@ContentChild(HeaderComponent) header!: HeaderComponent;

ngAfterContentInit() {
  console.log(this.header);
}

AfterContentChecked

AfterContentChecked kancası, aktarılan içeriğin her denetiminden sonra çalışır. Görünüm denetimi kancası gibi bu kanca da sık tetiklenir.

Tam Kanca Sırası

Girdileri ve içeriği olan bir bileşen için sıra şöyledir: ngOnChanges, ngOnInit, ngDoCheck, ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, ngAfterViewChecked.

// init sequence:
// OnChanges -> OnInit -> DoCheck
// -> AfterContentInit -> AfterContentChecked
// -> AfterViewInit -> AfterViewChecked

ExpressionChangedAfterChecked Hatası

ngAfterViewInit içinde bağlı verileri değiştirmek, ünlü ExpressionChangedAfterItHasBeenCheckedError hatasını tetikleyebilir. Bu hatadan kaçınmak için bu tür güncellemeleri erteleyin.

ngAfterViewInit() {
  // defer to next tick to avoid the error
  setTimeout(() => this.ready = true);
}

ViewChildren Kullanımı

@ViewChildren, ngAfterViewInit içinde kullanıma hazır olan, eşleşen birden çok öğe veya bileşenden oluşan bir QueryList döndürür.

@ViewChildren(ItemComponent) items!: QueryList<ItemComponent>;

ngAfterViewInit() {
  console.log(this.items.length);
}

Doğru Kancayı Seçme

Kendi şablonunuz için AfterView kancalarını, aktarılan içerik için AfterContent kancalarını kullanın. Tek seferlik kurulumlar için Init varyantlarını, yalnızca gerektiğinde Checked varyantlarını tercih edin.

Kısa Kontrol

Görünüm sonrası ve içerik sonrası kancaları anlayıp anlamadığınızı test edin.

Özet

AfterContent kancaları aktarılan içerik, AfterView kancaları ise bileşenin kendi görünümü için çalışır. Init varyantları bir kez, Checked varyantları her döngüde çalışır. @ViewChild ve @ContentChild öğelerine güvenli biçimde erişmek için bunları kullanın.

Sıkça Sorulan Sorular

“AfterView ve AfterContent Kancaları” dersi ücretsiz mi?

Evet — “AfterView ve AfterContent Kancaları” 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.

“AfterView ve AfterContent Kancaları” dersinde ne öğreneceğim?

Görünüm ve içerik başlatıldıktan sonra mantığı çalıştırın. 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.

“AfterView ve AfterContent Kancaları” 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

← Angular Academy Sayfasına Dön