本文将包含作者的一些理解。为了不和原作者的意思混淆，我把个人的理解放在【】里。原文地址那是我忙于为我的办公项目创建新功能的日子之一。突然，一件事引起了我的注意。上图是Angular渲染的最终DOM。当我检查DOM时，我看到Angular将ngcontent应用于元素。如果包含的元素在最终的DOM中，那它有什么用？这就是我对和感到困惑的地方。在寻找问题的答案时，我发现了和*ngTemplateOutlet的概念。现在我们有四个听起来几乎相同的概念。我开始了寻找他们的旅程。你遇到过这种情况吗？如果是，那么您来对地方了。事不宜迟，让我们一一解释。1.顾名思义，是Angular与结构化指令（*ngIf、*ngFor、[ngSwitch]和自定义指令）结合使用的模板元素这些模板元素仅在存在结构指令时才起作用。Angular包装了我们的应用指令元素。考虑下面的*ngIf示例。【我们可以看到，在对一个普通元素添加结构指令时，Angular在解析时实际上会为我购买并创建一个ng-template元素，并将相关的结构指令放在ng-template中进行处理】如上图是Angular的*ngIf的解释。最终的DOM与我们在本文开头看到的类似。用法我们已经看到Angular如何使用。但是我们如何使用它呢？由于它只对结构指令起作用，所以我们可以这样使用：【这是一个?的方式，后面再说】这里的home设置为true，上面代码在DOM中的输出是：nothing被渲染！为什么是这样？事实上，这正是预期的结果。正如我们已经讨论过的，Angular将ng-template替换为注解【翻译中使用的Angular版本为6.1.10。在Angular12版本中，注解已经换成了特殊的className]，我们的代码最终会被解释成下面的代码。我们的被Angular包裹后，就变成了两个。但是无论如何，Angular都不会选择的内容。这里有两种correct的使用方法：方法1在第一种方法中，你为Angular提供了一个不需要进一步处理的方法。这样Angular只会将转换为注释，而不会更改其内容。（它们将不再像前面的示例那样放置在任何中）。因此，它将正确呈现内容。要了解有关如何使用此结构和更多结构指令的更多信息，请参阅本文。方法2这是一种很少使用的方式（使用两个）。这里我们在then中给了一个模板引用，告诉他当条件为真时应该渲染什么。不建议像这样使用多个（您可以使用代替），因为这不是Angular的本意。应该在多个重用场景中使用。我们将在本文后面更详细地讨论它。你有没有写过或见过这样的代码我们大多数人写这样的代码的原因是Angular不能在单个元素上使用多个结构指令。现在这段代码工作正常，但如果item.id为假，它会在dom中引入很多空的。在简单的示例中它可能不是问题，但如果在大型复杂的应用程序（将显示数千个数据）中，它可能会变得麻烦，因为这些DOM上可能有侦听器。更糟糕的是，你可能不得不嵌套你的CSS。[大概是为了表达这些写法在附加样式的时候需要额外的选择器]别担心！为此，我们有
。是一个组元素，它不会干扰样式或布局，因为Angular不会将它们渲染到DOM中。上面的代码将像这样呈现DOM结构，我们摆脱了那些空的div。当我们只想使用多个结构指令而不想引入太多DOM时，我们应该使用。3.用于创建可配置组件。这意味着可以根据用户的意愿配置组件。这被称为内容投影~考虑一个简单的组件，它在组件的开始和结束标记之间使用是将要进行内容投影的内容。【即vue和react的槽】这些内容会渲染在组件的中，这样就可以自定义组件的footer部分。多投影如果您可以决定在何处渲染内容会怎么样？您还可以使用的select属性来控制内容的投影方式，而不是将每个内容投影到单个中。它需要一个元素选择器来确定在特定的中投影哪些内容。方法如下：我们修改来演示如何使用多个内容投影。Select属性选择器将呈现特定中的内容。这里我们先选择渲染h1元素，如果投影内容中没有h1元素，则不会渲染任何内容。同样，第二个选择查找div。其余内容在最后一个中呈现。上面的方法应该是旧版本的Angular。当前的Angular文档中没有提到它。当前使用请参考最新文档。4.*ngTemplateOutlet*ngTemplateOutlet一般用在两种场景：不考虑循环或条件创建一个高度可配置的组件通过插入通用模板进入模板重用考虑一个必须在多个地方插入模板的视图。例如，要放置在网站中的公司徽标。我们可以通过为徽标编写一次模板并在视图中的任何地方重复使用它来实现这一点。这是代码片段：如您所见，我们只编写一次模板代码并使用它三次！<*ngTemplateOutlet>还接受一个上下文对象，可以传递该对象以自定义通用模板输出。关于上下文的更多信息，请参考官方文档CustomComponents<*ngTemplateOutlet>的第二种使用方式是高度自定义的组件。考虑我们之前的示例。并进行一些修改。上面是组件的修改版本，它接受三个属性——。下面是它的代码片段：我们在这个视图中实现的是显示从的父组件接收到的页眉、文本和页脚。如果未提供其中任何一个，我们的组件将在其位置显示一个默认模板。因此，创建了一个高度定制的组件。现在使用我们刚刚创建的组件：这就是我们将模板引用传递给组件的方式。如果其中任何一个未通过，组件将呈现默认模板！ng-contentvs*ngTemplateOutlet都是帮助我们实现高度定制化的组件，但是我们应该如何选择呢？可以很明显的看出*ngTemplateOutlet给了我们更多的能力，比如提供一个默认的模板...但是智能的将内容原样渲染出来，并且借助select属性，可以对内容进行拆分并将其显示在不同的视图位置呈现它们。您不能有条件地呈现的内容。您必须限制从父组件接收的内容，您不能根据内容做出决定。无论如何，在两者之间进行选择完全取决于您的用例。至少现在我们有了一个新武器*ngTemplateOutlet可以更好地控制
