Ich versuche, eine benutzerdefinierte Komponente mit mehreren ng-contentin Angular 6 zu erstellen , aber dies funktioniert nicht und ich habe keine Ahnung warum.

Dies ist mein Komponentencode:

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

Ich versuche, diese Komponente an einer anderen Stelle zu verwenden und zwei verschiedene HTML-Codes innerhalb bodyund in der Kopfzeile selectvon zu rendern ng-content:

<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>

Die Komponente wird jedoch leer.

Weißt du, was ich falsch machen könnte oder wie ich zwei verschiedene Abschnitte in derselben Komponente am besten rendern kann?

Vielen Dank!

1. Sie können Dummy-Attribute headerund bodyim Gegensatz zu Vorlagenreferenzen hinzufügen (#header, #body).
2. Und transclude mit ng-contentmit selectAttribut wie 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

Anpassen der Webkomponenten- Spezifikationen. Auch wenn das Angular ist. Es geht darum, Attribute für Selektoren wie Angular-Direktiven oder reservierte Attribute mit einer anderen Verwendung zu vermeiden. Wir verwenden also einfach das Attribut "slot". Wir werden sehen <ng-content select="[slot=foobar]">als <slot name="foobar">.

Beispiel:

hallo-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>

Ergebnis

This is a Hello World example.

Stackblitz Beispiel

Sie können einen beliebigen Namen wie "Banane" oder "Fisch" verwenden. Aber "Start" und "Ende" sind eine gute Konvention, um Elemente davor und danach zu platzieren.

alternativ können Sie verwenden:

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>

Ergänzung der anderen Antworten:

Sie können es auch tun , mit benutzerdefinierten Tags (wie <ion-card>, <ion-card-header>, und <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>

Sie erhalten eine Warnmeldung, die jedoch funktioniert. Sie können die Warnmeldungen unterdrücken oder bekannte Tags wie headeroder verwenden footer. Wenn Ihnen eine dieser Methoden jedoch nicht gefällt, sollten Sie sich für eine der anderen Lösungen entscheiden.