在 Angular 中使用 ng-content 进行内容投影

AngularJS有转置，Angel使用得到内容投影。

<$>[注]这篇文章涵盖了角度2及以上。<$>

假设您有一个带有装饰器的Home零部件，其外观如下所示：

1@Component({
2  selector: 'home',
3  template: `
4    <h1>Heroic Title</h1>
5    <p>Something good...</p>
6  `
7})

假设您希望在包含组件时能够执行以下操作：

1<home>
2  <p>Something else</p>
3</home>

然后，您要做的就是在组件模板中使用：

1@Component({
2  selector: 'home',
3  template: `
4    <h1>Heroic Title</h1>
5    <p>Something good...</p>
6    <ng-content></ng-content>
7  `
8})

结果将如下所示：

1<h1>Heroic Title</h1>
2<p>Something good...</p>
3<p>Something else</p>

这样，您还可以将组件放置在包装器组件中。例如，下面是如何将myNav组件投影到home组件中：

1<home>
2  <myNav></myNav>
3</home>

您还可以使用SELECT on ng-Content来定义应该包括的内容。在本例中，将仅包括div元素：

1@Component({
2  selector: 'home',
3  template: `
4    <h1>Heroic Title</h1>
5    <p>Something good...</p>
6    <ng-content select="div">
7    </ng-content>
8  `
9})

您可以使用[attr]语法只选择具有特定属性的元素。在下面的示例中，将仅包括类似

...

的内容：

1@Component({
2  selector: 'home',
3  template: `
4    <h1>Heroic Title</h1>
5    <p>Something good...</p>
6    <ng-content select="[intro]">
7    </ng-content>
8  `
9})