Angular Academy · Ders

Tek Yuvalı İçerik Yansıtma

İçeriği ng-content ile yansıtın

Tek Yuvalı İçerik Yansıtma, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 1. 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.

İçerik Yansıtma Nedir?

İçerik yansıtma, bir bileşenin üst öğesinden işaretleme almasına ve bunu kendi şablonu içinde görüntülemesine olanak tanır. Bu, Angular'daki web bileşenlerinin "yuvalarına" eşdeğerdir.

Üst öğe içeriği bileşenin etiketleri arasına yazar ve bileşen bu içeriğin nerede görüneceğine karar verir.

Neden Gereklidir?

Kartlar, iletişim kutuları ve paneller gibi yeniden kullanılabilir sarmalayıcılar içeriklerini önceden bilemez. İçerik yansıtma, onları esnek kapsayıcılara dönüştürür.

Bir kartı bir kez oluşturup istediğiniz içerikle doldurun
Düzen mantığını bileşende tutun
İçeriği tüketicide tutun

ng-content Öğesi

<ng-content> öğesi, yansıtılan içeriğin yerleştirileceği konumu belirtir. Tek yuvalı bir kurulumda, select özniteliği olmayan tam olarak bir <ng-content> kullanılır.

@Component({
  selector: 'app-card',
  template: '<div class="card"><ng-content></ng-content></div>'
})
export class CardComponent {}

Bileşeni Kullanma

Üst öğenin bileşen etiketleri arasına yerleştirdiği her şey yuvaya yansıtılır.

<app-card>
  <h2>Hello</h2>
  <p>This text is projected into the card.</p>
</app-card>

Tek Yuva = Tek Çıkış

Adsız tek bir yuvada, yansıtılan tüm düğümler tek <ng-content> öğesine gider. Filtreleme yapılmaz; sıra, üst öğenin yazdığı biçimde aynen korunur.

Varsayılan İçerik

<ng-content> içine yedek işaretleme yerleştirebilirsiniz. Modern Angular, bu varsayılan içeriği yalnızca tüketici bu yuvaya hiçbir şey yansıtmadığında görüntüler.

<div class="card">
  <ng-content>No content provided.</ng-content>
</div>

Yansıtılan İçeriği Biçimlendirme

Yansıtılan içerik üst öğenin görünümüne aittir; bu nedenle kartın stilleriyle değil, üst öğenin stilleriyle biçimlendirilir. Karttan yansıtılan düğümlere erişmek için ::ng-deep seçicisini ölçülü kullanın veya genel stillere başvurun.

İçerik ve Görünüm

Angular, içerik alt öğelerini (yansıtılan) görünüm alt öğelerinden (şablonda bildirilen) ayırır. Bu ayrım, contentChild ve viewChild gibi sorgular için önemlidir.

icon = contentChild(IconComponent);

Yaşam Döngüsü: ngAfterContentInit

Yansıtılan içeriğe ngAfterContentInit() çalıştıktan sonra erişilebilir. İçerik alt öğelerini güvenli bir şekilde okumak için bunu (veya ngAfterContentChecked) kullanın.

ngAfterContentInit() {
  console.log('Projected content ready');
}

Gerçek Bir Panel Örneği

İşte tamamen yeniden kullanılabilir bir panel. Tüketici iç kısmı tamamen denetler; panel ise dış çerçeveyi denetler.

@Component({
  selector: 'app-panel',
  template: '<section class="panel"><ng-content></ng-content></section>',
  styles: ['.panel { border: 1px solid #ccc; padding: 16px; }']
})
export class PanelComponent {}

Yaygın Hata

Aynı adsız <ng-content> öğesini iki kez yerleştirmek içeriği çoğaltmaz. Angular yalnızca son eşleşen yuvaya yansıtır. Birden çok bölgeye ihtiyacınız varsa çok yuvalı yansıtma kullanın.

Hızlı Kontrol

Tek yuvalı yansıtma hakkındaki anlayışınızı sınayın.

Özet

İçerik yansıtmanın, üst öğenin sağladığı işaretlemeyi bir bileşenin içinde görüntülemek için <ng-content> kullandığını öğrendiniz. Tek yuvalı yansıtma adsız tek bir çıkış kullanır, yansıtılan içerik üst öğenin görünümüne aittir ve ngAfterContentInit içinde kullanılabilir hâle gelir.

Sıkça Sorulan Sorular

“Tek Yuvalı İçerik Yansıtma” dersi ücretsiz mi?

Evet — “Tek Yuvalı İçerik Yansıtma” 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.

“Tek Yuvalı İçerik Yansıtma” dersinde ne öğreneceğim?

İçeriği ng-content ile yansıtı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 1. dersidir.

“Tek Yuvalı İçerik Yansıtma” 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