Angular 2: Übertragen von Inhalten zwischen den Komponententags

Question

Wenn eine Komponente gerendert wird, dann im Inneren Inhalt ignoriert wird, zum Beispiel

import { Component } from '@angular/core'; 
@Component({ 
    selector: 'app-root', 
    template: '<div>{{title}}</div>', 
}) 
export class AppComponent { 
    title = 'app works!'; 
} 

es wie

<app-root>Ignored content</app-root> 

Render Mit

<div>app works!</div> 

Aber suchen PrimeNg Dialog verwenden sie Komponenten wie diese

<p-dialog [(visible)]="display"> 
    <p-header> 
     Header content here 
    </p-header> 
    Content 
    <p-footer> 
     Footer content here 
    </p-footer> 
</p-dialog> 

Als "Header content here", "Content" und "Footer content here" sind interne Komponenten, warum werden nicht ignoriert und wie kann ich dies erreichen?

Answer 1

hinzufügen <ng-content></ng-content> zu der Vorlage Komponente, wo der Inhalt projiziert werden soll:

@Component({ 
    selector: 'app-root', 
    template: '<div>{{title}}</div> 
      <br> 
      <ng-content></ng-content>', 
}) 
export class AppComponent { 
    title = 'app works!'; 
} 

Inhalt zu projizieren:

<app-root>This is projected content!</app-root> 

Der Ausgang wird:

app works! 
This is projected content! 

Hier ein großartiger Artikel über die Projektion von Projektionen mit einem Winkel (Angular 1 Transclusion): Transclusion in Angular 2 with ng-content