如果你尝试在 Angular 中编写可重复使用的组件，则可能会接触到内容投射的概念。然后你发现了 <ng-content> ，并找到了一些关于它的文章，进而实现了所需的功能。
接下来我们来通过一个简单的示例，一步步介绍 <ng-content> 所涉及的内容。
Simple example
在本文中我们使用一个示例，来演示不同的方式实现内容投影。由于许多问题与Angular 中的组件生命周期相关，因此我们的主要组件将显示一个计数器，用于展示它已被实例化的次数：
import { Component } from '@angular/core'; let instances = 0; @Component({ selector: 'counter', template: '<h1>{{this.id}}</h1>' }) class Counter { id: number; constructor() { this.id = ++instances; } }
上面示例中我们定义了 Counter 组件，组件类中的 id 属性用于显示本组件被实例化的次数。接着我们继续定义一个 Wrapper 组件：
import { Component } from '@angular/core'; @Component({ selector: 'wrapper', template: ` <div> <ng-content></ng-content> </div> ` }) class Wrapper {}
现在我们来验证一下效果：
<wrapper> <counter></counter> <counter></counter> <counter></counter> </wrapper>
Targeted projection
有时你希望将包装器的不同子项投影到模板的不同部分。为了处理这个问题， <ng-content> 支持一个 select 属性，可以让你在特定的地方投射具体的内容。该属性支持 CSS 选择器（my-element，.my-class，[my-attribute]，...）来匹配你想要的内容。如果 ng-content 上没有设置 select 属性，它将接收全部内容，或接收不匹配任何其他 ng-content 元素的内容。长话短说：
import { Component } from '@angular/core'; @Component({ selector: 'wrapper', template: ` <div> <ng-content></ng-content> </div> <div> <ng-content select="counter"></ng-content> </div> `, styles: [` .red {background: red;} .blue {background: blue;} `] }) export class Wrapper { }
上面示例中，我们引入了 select 属性，来选择投射的内容：
<wrapper> <span>This is not a counter</span> <counter></counter> </wrapper>
上述代码成功运行后，counter 组件被正确投影到第二个蓝色框中，而 span 元素最终会在全部红色框中。请注意，目标 ng-content 会优先于 catch-all，即使它在模板中的位置靠后。
ngProjectAs
有时你的内部组件会被隐藏在另一个更大的组件中。有时你只需要将其包装在额外的容器中即可应用 ngIf 或 ngSwitch。无论什么原因，通常情况下，你的内部组件不是包装器的直接子节点。为了演示上述情况，我们将 Counter 组件包装在一个 <ng-container> 中，看看我们的目标投影会发生什么：
<wrapper> <ng-container> <counter></counter> </ng-container> </wrapper>
现在我们的 couter 组件会被投影到第一个红色框中。因为 ng-container 容器不再匹配 select="counter"。为了解决这个问题，我们必须使用 ngProjectAs 属性，它可以应用于任何元素上。具体如下：
<wrapper> <ng-container ngProjectAs="counter"> <counter></counter> </ng-container> </wrapper>
通过设置 ngProjectAs 属性，终于让我们的 counter 组件重回蓝色框的怀抱了。
Time to poke and prod
我们从一个简单的实验开始：将两个 <ng-content> 块放在我们的模板中，没有选择器。会出现什么情况？
页面中会显示一个或两个框，如果我们包含两个框，它们的内容是显示 1 和 1 或 1 和 2？
<div> <ng-content></ng-content> </div> <div> <ng-content></ng-content> </div>
答案是我们在最后一个 <ng-content> 中得到一个计数器，另一个是空的！在我们尝试解释为什么之前，让我们再来验证一个问题，即在 ng-content 指令的外层容器中添加 ngIf 指令：
import { Component } from '@angular/core'; @Component({ selector: 'wrapper', template: ` <button (click)="show = !show"> {{ show ? 'Hide' : 'Show' }} </button> <div *ngIf="show"> <ng-content></ng-content> </div> ` }) class Wrapper { show = true; }
乍一看，似乎正常运行。但是如果你通过按钮进行切换操作，你会注意到计数器的值不会增加。这意味着我们的计数器组件只被实例化了一次 - 从未被销毁和重新创建。难道这是 ngIf 指令产生的问题，让我们测试一下 ngFor 指令，看看是否有同样的问题：