角2：呈现组件标签

Question

当组件被呈现，则内容内部被忽略之间的内容，例如

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

使用它像

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

渲染

<div>app works!</div> 

但是看PrimeNg对话框他们使用这样的组件

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

由于“标题内容在这里”，“内容”和“页脚内容在这里”是内部组件，为什么不被忽略，我怎么能实现这个？

Answer 1

添加<ng-content></ng-content>到组件的模板，其中内容应突出：

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

内容将被投射：

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

输出将是：

app works! 
This is projected content! 

这里一篇关于Angular Content Projection（Angular 1 Transclusion）的文章：Transclusion in Angular 2 with ng-content