原文今天在做Angular开发的时候，一个知识点引起了我的注意：在查看DOM的时候，看到ngcontent被替换成了Angular适用于元素。嗯...如果\包含最终DOM中的元素，那有什么用？当时我对\和\之间的区别感到困惑。在寻找问题答案的过程中，我发现了\的概念。令我惊讶的是，还有另一个令人困惑的概念：*ngTemplateOutlet。我开始了寻求澄清两个概念的旅程，但现在我有四个，它们听起来几乎一样！你遇到过这种情况吗？如果是，那么您来对地方了。那么话不多说，让我们一一介绍。1.\顾名思义，\是Angular与结构指令（ngIf、ngFor、[ngSwitch]和自定义指令）一起使用的模板元素。这些模板元素仅在存在结构指令时才起作用。Angular将宿主元素（指令适用的元素）包装在\中，并通过用诊断注释替换它来在完整的DOM中使用\。考虑一个简单的*ngIf示例：上面显示的是*ngIf的Angular解释，即脱糖后的实际代码。Angular将apply指令的宿主元素放在\中，并让宿主保持原样。生成的DOM类似于我们在本文开头看到的：2.\我们中的许多人编写此代码的原因是无法在Angular中的单个宿主元素上使用多个结构指令。现在这段代码可以正常工作，但是如果item.id是一个可能不需要的虚假值，它会在DOM中引入几个额外的空\。人们可能不会关心像这样的简单示例，但是对于具有复杂DOM（显示数万条数据）的大型应用程序，这可能会变得很麻烦，因为元素可能附加了监听器，而这些监听器Listeners仍然存在以监听到DOM中的事件。更糟糕的是应用样式(CSS)必须执行的嵌套级别！别担心，我们有\
来拯救！Angular\是一个不会干扰样式或布局的分组元素，因为Angular不会将它放在DOM中。使用ng-container重写。可以理解为将div标签放在ng-container的void容器中。当div的*ngIf指令的布尔值为false时，根本不会生成void容器和里面的div标签。在最终呈现的HTML代码中，没有额外的空div标签：最佳实践：当我们只想应用多个结构指令而不在我们的DOM中引入任何额外元素时，我们应该使用\。3.\它们用于创建可配置组件。这意味着可以根据用户的需要配置组件。这被称为内容投影：内容投影。已发布的库中使用的组件使用\使其自身可配置。考虑一个简单的\组件，下图是它自己的HTML定义：显然，页脚区域允许动态配置内容。下图显示了如何为页脚区域动态注入自定义页脚内容。这种用法称为单次投射。在\组件的开始和结束标记中传递的HTML内容将被投影。这就是我们所说的内容投影。内容将在提供内容投影功能的组件内呈现在\中。这允许\组件的消费者在组件内部传递任何自定义页脚，并准确控制他们希望如何呈现它。多重预测如果您可以决定什么去了哪里呢？除了将每个内容投影到单个\之外，您还可以使用\的select属性来控制内容的投影方式。它需要一个元素选择器来决定在特定的\中投射哪些内容。就是这样：我们修改了\定义以执行多个内容投影。select属性选择将在特定中呈现的内容类型。这里我们选择先渲染标题h1元素。如果投影内容没有h1元素，则不会呈现任何内容。同样，第二个选择查找div。其余内容在最后一个\中呈现，没有任何选项。如何使用selectprop使用这个多播组件？方法如下：4.*ngTemplateOutlet*ngTemplateOutlet用于两种场景：在视图的各个部分插入通用模板，制作高度可配置的组件，无需考虑循环或条件。模板重用考虑一个视图，你必须在多个地方插入模板。例如，要放置在网站上的公司徽标。我们可以通过为徽标编写一次模板并在视图中的任何地方重复使用它来实现它。这是代码片段：如您所见，我们只编写了一次徽标模板，并在同一页面上用一行代码使用了3次！Customizablecomponents*ngTemplateOutlet的第二个用例是高度可定制的组件。考虑我们之前的\组件示例，并进行了一些修改：以上是\组件的修改版本，它接受三个输入属性-headerTemplate、bodyTemplate、footerTemplate。以下是project-content.ts的一个片段：模板文件中使用的input属性，Component文件中定义的headerTemplate、bodyTemplate和footerTemplate属性。我们在这里试图实现的是显示从\的父组件接收到的页眉、文本和页脚。如果没有提供这些，我们的组件将在其位置显示一个默认模板。因此，创建了一个高度定制的组件。使用我们最近修改的组件：这就是我们将模板引用传递给我们的组件的方式。如果其中任何一个未通过，组件将呈现默认模板。ng-contentvs.*ngTemplateOutlet都可以帮助我们实现高度定制化的组件，但是到底该选哪个，什么时候选？可以清楚地看到，*ngTemplateOutlet使我们能够在未提供的情况下显示默认模板。ng-content不是这种情况。它按原样呈现内容。您最多可以在select属性的帮助下拆分内容并将它们呈现在视图的不同位置。您不能有条件地在ng-content中呈现内容。你必须展示你从父母那里收到的东西，你不能根据内容做出决定。但是，在两者之间进行选择完全取决于您的用例。至少现在我们的武器库中有了新武器*ngTemplateOutlet，除了ng-content的功能外，它还提供了对内容的更多控制！更多Jerry原创文章在这里：《王子熙》：
