渲染组件标签之间的内容 [英] Render content between the component tags

问题描述

渲染组件时，其中的内容将被忽略，例如:

When a component is rendered, content inside it is ignored, for example:

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对话框时，他们使用的组件是这样的:

But looking at PrimeNg dialog, they use components like this:

<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都位于组件内部，为什么不忽略它们，我该如何实现呢?

As Header content here, Content and Footer content here are inside the component, why are not they getting ignored and how can I achieve this?

推荐答案

在要投影内容的组件模板中添加<ng-content></ng-content>:

Add <ng-content></ng-content> to the component's template where the content should be projected:

@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内容投影(Angular 1包含)的好文章:具有ng-content的Angular 2中的包含

Here is a great article about Angular Content Projection (Angular 1 Transclusion): Transclusion in Angular 2 with ng-content

这篇关于渲染组件标签之间的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！