Angular Academy · Ders

select ile Çok Yuvalı Yansıtma

İçeriği adlandırılmış yuvalara yansıtın

select ile Çok Yuvalı Yansıtma, CoddyKit'te ücretsiz bir Angular Academy dersidir. Bu, 4 dersinin 2. 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.

Birden Çok Yuvalı Yansıtma

Birçok bileşenin üst bilgi, gövde ve alt bilgi gibi birkaç bölgeye ihtiyacı vardır. Angular bunu, <ng-content> üzerinde select özniteliğini kullanan çok yuvalı yansıtma ile destekler.

select Özniteliği

select bir CSS seçicisi alır. Her <ng-content select="..."> yalnızca bu seçiciyle eşleşen düğümleri yansıtır.

<ng-content select="[card-header]"></ng-content>
<ng-content select="[card-body]"></ng-content>

Özniteliğe Göre Seçme

Öznitelik seçicileri, tüketicinin işaretlemesinde anlaşılır göründükleri için en yaygın kalıptır.

@Component({
  selector: 'app-card',
  template:
    '<header><ng-content select="[header]"></ng-content></header>' +
    '<main><ng-content select="[body]"></ng-content></main>'
})
export class CardComponent {}

Adlandırılmış Yuvaları Kullanma

Tüketici, her içerik parçasını eşleşen öznitelikle etiketler.

<app-card>
  <h2 header>Title</h2>
  <p body>Some body text here.</p>
</app-card>

Öğeye veya Sınıfa Göre Seçme

Öğe adına veya CSS sınıfına göre de seçim yapabilirsiniz.

<ng-content select="card-title"></ng-content>
<ng-content select=".highlight"></ng-content>

Tümünü Yakalayan Yuva

select içermeyen bir <ng-content>, adlandırılmış bir yuvayla eşleşmeyen her şeyi yakalar. Bunu yedek olarak en sona yerleştirin.

<ng-content select="[header]"></ng-content>
<ng-content></ng-content>

Sıra Önemlidir

Angular, yuvaları şablondaki sıralarına göre değerlendirir. Her yansıtılan düğüm ilk eşleşen yuvaya gider. Her şeyi yutmaması için tümünü yakalayan yuvayı özel seçicilerden sonra yerleştirin.

Seçicileri Birleştirme

CSS seçicileri birleştirilebilir; örneğin select="button[primary]", primary özniteliğine sahip bir button öğesini hedefler.

<ng-content select="button[primary]"></ng-content>

Düzen Bileşeni

İşte üst bilgi, gövde ve alt bilgi yuvalarının yanı sıra tümünü yakalayan bir yuvaya sahip bir kart.

@Component({
  selector: 'app-card',
  template:
    '<header><ng-content select="[header]"></ng-content></header>' +
    '<section><ng-content></ng-content></section>' +
    '<footer><ng-content select="[footer]"></ng-content></footer>'
})
export class CardComponent {}

Her Düğüm Bir Kez Yansıtılır

Belirli bir yansıtılan düğüm yalnızca bir yuvayla eşleşir ve tam olarak bir kez görüntülenir. Aynı düğümü yansıtma yoluyla iki yuvaya kopyalamanın bir yolu yoktur.

Yuva Başına Biçimlendirme

Her yuva farklı bir DOM konumunda bulunduğundan, her bölgeye kendine özgü bir görünüm kazandırmak için yuvaları stillendirilmiş kapsayıcılarla (üst bilgi/alt bilgi) sarabilirsiniz.

Hızlı Kontrol

Çok yuvalı yansıtma hakkındaki bilginizi sınayın.

Özet

<ng-content select="..."> ile çok yuvalı bileşenler oluşturmayı öğrendiniz. Seçiciler öznitelikleri, öğeleri veya sınıfları hedefleyebilir; seçilmemiş bir yuva tümünü yakalar ve sıra hangi yuvanın kazanacağını belirler.

Sıkça Sorulan Sorular

“select ile Çok Yuvalı Yansıtma” dersi ücretsiz mi?

Evet — “select ile Çok Yuvalı 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.

“select ile Çok Yuvalı Yansıtma” dersinde ne öğreneceğim?

İçeriği adlandırılmış yuvalara 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 2. dersidir.

“select ile Çok Yuvalı 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