Genellikle farklı içerik türleri için kapsayıcı görevi gören bileşenler oluşturmanız gerekir. Örneğin, özel bir kart bileşeni oluşturmak isteyebilirsiniz:
@Component({
selector: 'custom-card',
template: '<div class="card-shadow"> <!-- card content goes here --> </div>',
})
export class CustomCard {/* ... */}<ng-content> öğesini içeriğin nereye gideceğini işaretlemek için bir yer tutucu olarak kullanabilirsiniz:
@Component({
selector: 'custom-card',
template: '<div class="card-shadow"> <ng-content></ng-content> </div>',
})
export class CustomCard {/* ... */}<ng-content> ile bir bileşen kullandığınızda, bileşen ana öğesinin tüm alt öğeleri bu öğesinin konumunda oluşturulur veya yansıtılır:
// Component source
@Component({
selector: 'custom-card',
template: `
<div class="card-shadow">
<ng-content />
</div>
`,
})
export class CustomCard {/* ... */}<!-- Using the component -->
<custom-card>
<p>This is the projected content</p>
</custom-card><!-- The rendered DOM -->
<custom-card>
<div class="card-shadow">
<p>This is the projected content</p>
</div>
</custom-card>Angular, bu şekilde aktarılan bir bileşenin tüm alt öğelerini o bileşenin içeriği olarak ifade eder. Bu, bileşenin şablonunda tanımlanan öğelere atıfta bulunan bileşenin görünümünden farklıdır.
<ng-content> öğesi ne bir bileşen ne de DOM öğesidir. Bunun yerine, Angular’a içeriğin nerede işleneceğini söyleyen özel bir yer tutucudur. Angular’ın derleyicisi tüm öğelerini derleme zamanında işler. Çalışma zamanında öğesini ekleyemez, kaldıramaz veya değiştiremezsiniz. öğesine yönergeler, stiller veya rastgele nitelikler ekleyemezsiniz.
<ng-content> öğesini ngIf, ngFor veya ngSwitch ile koşullu olarak dahil etmemelisiniz. Bileşen içeriğinin koşullu olarak işlenmesi için Template fragments bölümüne bakın.
Çoklu içerik yer tutucuları #
Angular, CSS seçicisine dayalı olarak birden fazla farklı öğenin farklı <ng-content> yer tutucularına yansıtılmasını destekler. Yukarıdaki kart örneğini genişletirsek, select niteliğini kullanarak bir kart başlığı ve bir kart gövdesi için iki yer tutucu oluşturabilirsiniz:
<!-- Component template -->
<div class="card-shadow">
<ng-content select="card-title"></ng-content>
<div class="card-divider"></div>
<ng-content select="card-body"></ng-content>
</div><!-- Using the component -->
<custom-card>
<card-title>Hello</card-title>
<card-body>Welcome to the example</card-body>
</custom-card><!-- Rendered DOM -->
<custom-card>
<div class="card-shadow">
<card-title>Hello</card-title>
<div class="card-divider"></div>
<card-body>Welcome to the example</card-body>
</div>
</custom-card><ng-content> yer tutucusu, bileşen seçicileriyle aynı CSS component selectors destekler.
Bir select özniteliğine sahip bir veya daha fazla <ng-content> yer tutucusu ve select özniteliğine sahip olmayan bir <ng-content> yer tutucusu eklerseniz, ikincisi bir select özniteliğiyle eşleşmeyen tüm öğeleri yakalar:
<!-- Component template -->
<div class="card-shadow">
<ng-content select="card-title"></ng-content>
<div class="card-divider"></div>
<!-- capture anything except "card-title" -->
<ng-content></ng-content>
</div><!-- Using the component -->
<custom-card>
<card-title>Hello</card-title>
<img src="..." />
<p>Welcome to the example</p>
</custom-card><!-- Rendered DOM -->
<custom-card>
<div class="card-shadow">
<card-title>Hello</card-title>
<div class="card-divider"></div>
<img src="..." />
<p>Welcome to the example></p>
</div>
</custom-card>Bir bileşen select özniteliği olmayan bir <ng-content> yer tutucusu içermiyorsa, bileşenin yer tutucularından biriyle eşleşmeyen hiçbir öğe DOM’da işlenmez.
Projeksiyon için içeriği takma adlandırma #
Angular, herhangi bir öğe üzerinde bir CSS seçici belirtmenize olanak tanıyan ngProjectAs adlı özel bir niteliği destekler. ngProjectAs içeren bir öğe <ng-content> bir yer tutucusuna karşı kontrol edildiğinde, Angular öğenin kimliği yerine ngProjectAs değeriyle karşılaştırır:
<!-- Component template -->
<div class="card-shadow">
<ng-content select="card-title"></ng-content>
<div class="card-divider"></div>
<ng-content></ng-content>
</div><!-- Using the component -->
<custom-card>
<h3 ngProjectAs="card-title">Hello</h3>
<p>Welcome to the example</p>
</custom-card><!-- Rendered DOM -->
<custom-card>
<div class="card-shadow">
<h3>Hello</h3>
<div class="card-divider"></div>
<p>Welcome to the example></p>
</div>
</custom-card>ngProjectAs yalnızca statik değerleri destekler ve dinamik ifadelere bağlanamaz.
