在 Angular 中，ng-template 是一种灵活的工具，用于生成可重复使用的可组合 HTML 片段。使用 ng-template 可以帮助我们提高代码的复用性和可维护性，更好地组织和展示数据。
ng-template 的语法和用法
ng-template 在 Angular 中有很多种用法，我们以下以三种常见的用法为例：
1. 作为模板
我们可以在 Angular 组件模板中使用 ng-template 定义一个模板，然后通过 ngTemplateOutlet 指令将其渲染到页面中：
<ng-template #myTemplate> <h1>Hello, World!</h1> </ng-template> <div *ngTemplateOutlet="myTemplate"></div>
在上述代码中，我们首先在模板中定义了一个 ng-template，然后在 <div> 标签中通过 ngTemplateOutlet 指令将其渲染到页面中。这样可以使得我们的模板具有可重复使用性，方便我们在多个组件中复用。
2. 作为条件分支
我们可以使用 ng-template 来创建条件分支，根据不同的条件动态地渲染不同的内容：
-- -------------------- ---- -------
------------- ----------------------------------- -------- - ---------- ---- ------------------
------------ ---------------- ---------
---- ---------------------
------------ -----------
--------- ---- --------- ------------
------
---- ----------------------
------------ ----------
--------- ---- ------- --- --------
------
--------------在上述代码中，我们首先使用 ng-container 标签来定义一个虚拟容器，然后通过 ngTemplateOutlet 指令将我们的 contentTemplate 模板渲染到此容器中，同时为模板提供了一个名为 user 的上下文变量。在模板中，我们根据 user.isAdmin 的值，决定渲染哪个分支。
3. 作为循环
我们可以使用 ng-template 来创建循环，例如：
<ng-container *ngTemplateOutlet="userItemTemplate; context: { $implicit: user }" *ngFor="let user of users"></ng-container>
<ng-template #userItemTemplate let-user>
<div>
<h2>{{user.name}}</h2>
<p>{{user.email}}</p>
</div>
</ng-template>在上述代码中，我们可以看到，通过使用 ng-container 标签将我们的模板包装起来，同时通过 *ngFor 指令让模板循环渲染。在模板中，我们使用 let-user 将当前迭代的 user 对象传递给模板，然后根据需要进行渲染。
总结
ng-template 是一个非常强大的工具，可以在 Angular 中实现非常灵活的编程方式。我们可以用它来实现复杂的条件显示、循环渲染以及组件嵌套等功能。但是在使用 ng-template 时，需要注意不要滥用，否则可能会造成代码的混乱和调试难度的提高。同时，我们还需要了解 ng-template 的一些高级用法，例如 ngTemplateOutletContext，ng-content 等，这些都有助于我们更好地使用 ng-template 来提高项目的可维护性和代码的复用性。
示例代码
示例代码可从 github 获取。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6487df7348841e989466a033