ng-contentAngular 6'da çoklu kullanarak özel bir bileşen oluşturmaya çalışıyorum , ancak bu çalışmıyor ve neden olduğuna dair hiçbir fikrim yok.

Bu benim bileşen kodum:

<div class="header-css-class">
    <ng-content select="#header"></ng-content>
</div>
<div class="body-css-class">
    <ng-content select="#body"></ng-content>
</div>

Başka bir yerde bu bileşeni kullanmak ve iki farklı HTML kodu içini işlemek çalışıyorum bodyve başlık selectarasında ng-content, böyle bir şey:

<div #header>This should be rendered in header selection of ng-content</div>
<div #body>This should be rendered in body selection of ng-content</div>

Ancak bileşen boş görünüyor.

Neyi yanlış yapıyor olabileceğimi ya da iki farklı bölümü aynı bileşende oluşturmanın en iyi yolunun ne olduğunu biliyor musunuz?

Teşekkürler!

1. Sen nitelikler kukla ekleyebilir headerve bodyşablon başvurulara karşılık (#header, #body).
2. Ve kullanarak transclude ng-contentile selectbenzeri öznitelik select="[header]".

app.comp.html

<app-child>
    <div header >This should be rendered in header selection of ng-content</div>
    <div body >This should be rendered in body selection of ng-content</div>
</app-child>

child.comp.html

<div class="header-css-class">
    <ng-content select="[header]"></ng-content>
</div>
<div class="body-css-class">
    <ng-content select="[body]"></ng-content>
</div>

DEMO

Web Bileşeni özelliklerine uymak için . Açısal olsa bile. Açısal yönergeler gibi seçici özniteliklerinden veya başka bir kullanımla ayrılmış özniteliklerden kaçınmakla ilgilidir. Yani, biz sadece "slot" özelliğini kullanıyoruz. <ng-content select="[slot=foobar]">Olarak göreceğiz <slot name="foobar">.

Misal:

merhaba-world.component.html

<ng-content select="[slot=start]"></ng-content>
<span>Hello World</span>
<ng-content select="[slot=end]"></ng-content>

app.component.html

<app-hello-world>
  <span slot="start">This is a </span>
  <span slot="end"> example.</span>
</app-hello-world>

Sonuç

This is a Hello World example.

Stackblitz Örneği

"Muz" veya "balık" gibi istediğiniz herhangi bir adı kullanabilirsiniz. Ancak "başlangıç" ve "bitiş", öğeleri öncesine ve sonrasına yerleştirmek için iyi bir kuraldır.

alternatif olarak şunları kullanabilirsiniz:

app.comp.html

<app-child>
    <div role="header">This should be rendered in header selection of ng-content</div>
    <div role="body">This should be rendered in body selection of ng-content</div>
</app-child>

child.comp.html

<div class="header-css-class">
    <ng-content select="div[role=header]"></ng-content>
</div>
<div class="body-css-class">
    <ng-content select="div[role=body]"></ng-content>
</div>

Diğer cevapları tamamlamak:

Ayrıca, özel etiketleri ile bunu yapabiliyor (gibi <ion-card>, <ion-card-header>ve <ion-card-content>).

app.comp.html

<app-child>
    <app-child-header>This should be rendered in header selection of ng-content</app-child-header>
    <app-child-content>This should be rendered in content selection of ng-content</app-child-content>
</app-child>

child.comp.html

<div class="header-css-class">
    <ng-content select="app-child-header"></ng-content>
</div>
<div class="content-css-class">
    <ng-content select="app-child-content"></ng-content>
</div>

Bir uyarı mesajı alacaksınız, ancak işe yarayacak. Sen uyarı mesajlarını önlemek veya olabilir bilinen etiketleri kullanabilirsiniz gibi headerya footer. Ancak, bu yöntemlerden hiçbirini beğenmezseniz, diğer çözümlerden biriyle gitmelisiniz.