在组件标记之间渲染内容

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>

作为Header content here,Content并且Footer content here在组件内部,为什么它们不被忽略,我怎样才能实现这一目标？

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 1 Transclusion)的伟大文章:Angular 2中的ng-content中的Transclusion