kątowa 2: renderowania zawartości między znacznikami składowych

Question

Gdy element staje się, to zawartość środka jest ignorowana, na przykład

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

Stosując to jak

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

renderowania

<div>app works!</div> 

Ale patrząc na okno dialogowe PrimeNg używają takich komponentów, jak

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

Jako "Treść nagłówka tutaj", "Treść" i "Treść stopki tutaj" są elementami wewnętrznymi, dlaczego nie są ignorowane i jak mogę to osiągnąć?

Answer 1

Dodaj <ng-content></ng-content> do szablonu komponentu których zawartość powinna być rzutowany:

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

Treści być rzutowany:

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

wyjście będzie:

app works! 
This is projected content! 

Oto świetny artykuł na temat projekcji treści kątowych (Angular 1 Transclusion): Transclusion in Angular 2 with ng-content