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）的精彩文章：Transclusion in Angular 2 with ng-content

在组件标记

1 个答案: