İçerik projeksiyonu, bir bileşenin üst bileşen tarafından gönderilen işaretlemeyi kabul edip işlemesine izin verir — <ng-content> aracılığıyla yerleştirilir. Bu, esnek, yeniden kullanılabilir sarmalayıcı bileşenleri (kartlar, iletişim kutuları, düzenler) oluşturmanın yoludur ve iç içeriği tüketici kontrol eder. (Vue/web-component yuvalarının ve React children öğesinin Angular eşdeğeridir.)
// card.component.ts
@Component({
selector: "app-card",
template: `
<div class="card">
<ng-content></ng-content> <!-- parent's content is projected here -->
</div>
`,
})
export class CardComponent {}
<!-- parent: anything between the tags is projected into <ng-content> -->
<app-card>
<h2>Title</h2>
<p>Any content I want!</p>
</app-card>
Kart, stillendirilmiş sarmalayıcıyı sağlar; üst bileşen içine nelerin gireceğini belirler — @Input aracılığıyla dizeler iletmekten çok daha esnek.
select ile çok yuvaya sahip projeksiyon@Component({
selector: "app-panel",
template: `
<header><ng-content select="[panel-header]"></ng-content></header>
<main><ng-content></ng-content></main> <!-- default slot -->
<footer><ng-content select="[panel-footer]"></ng-content></footer>
`,
})
export class PanelComponent {}
<app-panel>
<h1 panel-header>My Panel</h1> <!-- goes to the header slot -->
<p>Main body content</p> <!-- goes to the default slot -->
<button panel-footer>OK</button> <!-- goes to the footer slot -->
</app-panel>
select özniteliği (CSS seçici — öznitelik, sınıf veya etiket) projekte edilen her içerik parçasını doğru <ng-content> yuvasına yönlendirir ve çok bölgeli düzenleri etkinleştirir.
Projected content is created in the PARENT's context — its bindings, methods,
and lifecycle belong to the parent, not the wrapper component.
İçerik projeksiyonu, Angular'da yeniden kullanılabilir, oluşturulabilir UI bileşenleri oluşturmanın anahtarıdır — kartlar, modeller, sekmeler, düzenler ve tüketici iç içerik sağlayan herhangi bir "kabuk".
Olmadığında, bileşenler katı olacaktır (sadece girdiler aracılığıyla yapılandırılabilir); <ng-content> (ve çok yuvalar için select) ile, esnek kapsayıcılar haline gelirler; bu, tasarım sistemleri ve paylaşılan bileşen kitaplıkları için gereklidir.