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

AngularJS 有嵌入，Angular 使用 获取内容投影。

这篇文章涵盖了 Angular 2 及更高版本。

假设您有一个带有装饰器的 home 组件，它有点像这样：

@Component({
  selector: 'home',
  template: `
    <h1>Heroic Title</h1>
    <p>Something good...</p>
  `
})

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

<home>
  <p>Something else</p>
</home>

然后你要做的是在你的组件模板中像这样使用 ：

@Component({
  selector: 'home',
  template: `
    <h1>Heroic Title</h1>
    <p>Something good...</p>
    <ng-content></ng-content>
  `
})

结果将如下所示：

<h1>Heroic Title</h1>
<p>Something good...</p>
<p>Something else</p>

有了这个，您还可以将组件放在包装器组件中。 例如，您将如何将 myNav 组件投影到 home 组件中：

<home>
  <myNav></myNav>
</home>

---

您还可以在 ng-content 上使用 select 来定义应该包含的内容。 在此示例中，仅包含 div 元素：

@Component({
  selector: 'home',
  template: `
    <h1>Heroic Title</h1>
    <p>Something good...</p>
    <ng-content select="div">
    </ng-content>
  `
})

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

…

将包括：

@Component({
  selector: 'home',
  template: `
    <h1>Heroic Title</h1>
    <p>Something good...</p>
    <ng-content select="[intro]">
    </ng-content>
  `
})