理解 Angular 中的内容投影

内容投影是什么？

内容投影（也称为内容嵌入）是一种
从组件外部导入 HTML 内容并将其插入到组件模板的
指定位置的方法。

因此，使用内容投影可以得到如下图所示的结果
。

请注意，该组件的工作方式类似于镜子。
下图所示是另一个更复杂的示例，其中正在
配置一封包含用户数据的信件。

我看到了一个ng-container，那是什么？

Angular 的 ng-container 是一个分组元素（语法元素），它不会
干扰样式或布局，因为 Angular 不会将其放入 DOM 中。

我们还可以将其与结构化指令一起使用。

结构性的……什么？

结构指令通过添加、删除或
操作 DOM 元素来改变 DOM 布局。

然后我可以……？

am-icon以下组件在哪里：

结果只有一个图标，而不是四个，正如我们预期的那样。💔

ng-content 的工作原理是什么？

• ng-content不会生成内容，它只是投影现有内容。
• 期望的一致性👀
• 表现🔥
• 根据之前的规则，它既不能创建也不能销毁已投影的组件（生命周期）。
• 只有最后一个 ng-content 会投影内容。

那我该怎么办？ 别担心，ng-template 来帮忙了……

什么是 ng-template？
顾名思义，它是一个模板元素，
一个可以实例化的模型，因此你可以将模板设置为组件的
输入，这非常有用。

星号 (*) 语法

星号是语法糖，代表更复杂的含义。

你通常会看到：*ngIf、*ngFor、*anyDirective 等。

那么我们的重复组件呢？

请解释一下ngTemplateOutlet是什么！

ngTemplateOutlet指令接收一个 ng-template 对象，并负责
创建该对象的实例并将其插入到 DOM 中。

对，就像 JS 中的上下文一样！

我们可以将一个对象传递给由ngTemplateOutlet创建的 ng-template 实例。该对象可以包含任何你
想传递给模板的内容。在这里，我们揭示了许多库
组件（例如 datatables、angular-material、ng-bootstrap 等）的强大功能。

我们能做出很棒的事情！

更多更多更多……

• 推介会
• 本文的 GitHub 分支地址为https://github.com/Caballerog/ng-transclusion/

原文发表于https://carloscaballero.io，日期为 2019 年 6 月 6 日。