Detaillierte Erklärung der Angular-Komponentenprojektion

Überblick

Ändern Sie den Inhalt von Komponentenvorlagen dynamisch zur Laufzeit. Es ist nicht so kompliziert wie Routing, es ist nur ein Stück HTML ohne Geschäftslogik.

Die ngContent-Direktive projiziert ein beliebiges Fragment der Vorlage der übergeordneten Komponente auf eine untergeordnete Komponente.

1. Einfaches Beispiel

1. Verwenden Sie die Direktive <ng-content> in der Unterkomponente, um den Projektionspunkt zu markieren

<div Klasse="Wrapper">
  <h2>Ich bin eine untergeordnete Komponente</h2>
  <div>Dieses Div ist in der untergeordneten Komponente definiert</div>
  <ng-Inhalt></ng-Inhalt> 
</div>

2. Schreiben Sie in der übergeordneten Komponente das HTML-Fragment des Projektionspunkts, der auf die untergeordnete Komponente projiziert werden soll, in das Tag der untergeordneten Komponente

<div Klasse="Wrapper">
  <h2>Ich bin die übergeordnete Komponente</h2>
  <div>Dieses Div ist in der übergeordneten Komponente definiert</div>
  <app-child2>
    <div>Dieses Div ist die übergeordnete Komponente, die in die untergeordnete Komponente projiziert wird</div>
  </app-child2>
</div>

Wirkung:

Unterkomponenten und Stile:

.Verpackung{
    Hintergrund: hellgrün;
}

Übergeordnete Komponente plus Stil:

.Verpackung{
    Hintergrund: Cyan;
} 

2. Mehrere <ng-content>-Projektionspunkte

Unterkomponenten:

<div Klasse="Wrapper">
  <h2>Ich bin eine untergeordnete Komponente</h2>
  <ng-content selector=".header"></ng-content>
  <div>Dieses Div ist in der untergeordneten Komponente definiert</div>
  <ng-content selector=".footer"></ng-content> 
</div>

Übergeordnete Komponente:

<div Klasse="Wrapper">
  <h2>Ich bin die übergeordnete Komponente</h2>
  <div>Dieses Div ist in der übergeordneten Komponente definiert</div>
  <app-child2>
    <div class="header">Dies ist der Seitenkopf. Dieses Div ist die übergeordnete Komponente, die in die untergeordnete Komponente projiziert wird. Der Titel lautet {{title}}</div>
    <div class="footer">Dies ist die Fußzeile. Dieses Div ist die übergeordnete Komponente, die in die untergeordnete Komponente projiziert wird</div>
  </app-child2>
</div> 

Kopf- und Fußzeile werden in die untergeordnete Komponente projiziert, und der Titel wird ebenfalls projiziert.

Interpolationsausdrücke in projiziertem Inhalt in der Vorlage der übergeordneten Komponente können nur Eigenschaften in der übergeordneten Komponente binden, obwohl der Inhalt in die untergeordnete Komponente projiziert wird.

3. HTML durch Angular-Attributbindung einfügen

Fügen Sie der Vorlage der übergeordneten Komponente eine Zeile hinzu:

<div [innerHTML]="divInhalt"></div>

Fügen Sie der übergeordneten Komponente ein divContent-Attribut hinzu, und der Inhalt ist ein HTML-Fragment.

divContent="<div>Eigenschaftsbindung innerHTML</div>";

Wirkung

4. Vergleich der ngContent-Direktive und der Attributbindung innerHTML

[innerHTML] ist eine browserspezifische API.

Die ngContent-Direktive ist plattformunabhängig. Es können mehrere Projektionspunkte gebunden werden.

Geben Sie ngContent-Direktiven Priorität

Oben finden Sie eine ausführliche Erläuterung der Projektion von Angular-Komponenten. Weitere Informationen zur Projektion von Angular-Komponenten finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!