在 Angular 7 中，ng-template 和 ng-container 组合使用可以帮助我们创建动态模板，让我们的代码更加灵活、易于扩展。本文将从深度和学习的角度，为你介绍这两个指令的使用方法，并提供代码示例。如果你正在学习 Angular 前端开发，那么本文对你会有指导意义。
ng-template 指令
ng-template 指令实例是一个潜在的包含视图的容器，其中包含一个 Angular 的模板，但它不是一个实际的 DOM 元素，也不会直接渲染到页面上。我们可以把它当作一个组件的属性，用来存储一组元素的模板，这些元素可能会在不同的情况下动态生成。
基本用法
下面是一个简单的示例，展示了如何使用 ng-template：
<ng-template #templateRef> <p>这是一个 ng-template 示例</p> </ng-template>
其中 #templateRef 是一个模板引用变量，可以在组件中使用 ViewChild 或者 ContentChild 指令引用。
创建动态模板
ng-template 指令最常用的场景就是创建动态模板。下面我们来看一个例子：假设我们有一个列表组件，列表项是可变的，有文本、图片、按钮等等不同的类型。我们可以用 ng-container 指令来定义一个列表项的模板，并把它传入到 ngFor 指令中，这样就可以动态生成多个列表项了。
假设我们有一个名为 ListComponent 的组件，代码如下：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
------------ ------------------------
---------- ------------------------
--
------ ----- ------------- -
--------- - -
- ----- ------- -------- ---------- --
- ----- -------- ---- ------------------------------ --
- ----- --------- ----- --------- ------ -- -- --------------- -
-
-模板文件 list.component.html 如下：
-- -------------------- ---- -------
------------- ----------- ---- -- -----------
------------- ---------------- --- --------
----- ------------ ------
---------------
------------- ---------------- --- ---------
---- ---------------- ---------
---------------
------------- ---------------- --- ----------
------- ------------------------- --------- -----------
---------------
---------------ng-container 指令
ng-container 指令是一个没有实际 DOM 元素的容器，它可以包含多个元素，但它不会渲染这些元素，只有在特定的条件下才会将它们插入到文档中。
常用场景
ng-container 指令的常用场景主要有两种：
条件渲染
对于需要根据条件选择不同元素进行渲染的场景，ng-container 指令非常有用。上面的示例中，我们就使用了 ng-container 指令来判断生成不同的列表项元素。
<ng-container *ngIf="item.type === 'text'">
<p>{{ item.content }}</p>
</ng-container>当 item.type 为 'text' 时，ngIf 表达式为 true，则
标签渲染到页面上；否则，
标签不会出现在页面中。
匿名插槽
在 Angular 中，父组件通过 <ng-content> 元素将自身内容嵌套在子组件中。但如果我们需要在子组件中加入一个可变区域，以便父组件能够在该区域中植入任意组件，就可以用到 ng-container 指令，如下所示：
<ng-container *ngTemplateOutlet="templateRef"></ng-container>
在这个示例中，我们使用了 ngTemplateOutlet 指令来引入一个预定义的 ng-template 模板，这样就可以将任意元素插入到该区域中。
示例代码
在这里，我们为大家提供了一个完整的示例代码，供学习与参考。这个例子实现了一个列表组件，可以根据列表项类型动态生成不同的元素。
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------------
--------- -----------
------------ ------------------------
---------- ------------------------
--
------ ----- ------------- -
--------- - -
- ----- ------- -------- ---------- --
- ----- -------- ---- ------------------------------ --
- ----- --------- ----- --------- ------ -- -- --------------- -
-
-模板文件 list.component.html 如下：
-- -------------------- ---- -------
----
--- ----------- ---- -- -----------
------------- --------------------------------- ---------------------------- ---------- ---- ------------------
-----
-----
------------ ------------- ---------
------------- ---------------- --- --------
----- ------------ ------
---------------
------------- ---------------- --- ---------
---- ---------------- ---------
---------------
------------- ---------------- --- ----------
------- ------------------------- --------- -----------
---------------
--------------在这个示例中，我们定义了一个列表组件，该组件通过遍历 listItems 数组，将每个元素传递给 itemTemplate 模板进行渲染。在 itemTemplate 中，我们使用了 ngIf 指令来判断元素类型，从而获取不同的渲染结果。
总结
本文为大家介绍了 Angular 7 中的 ng-template 和 ng-container 指令的使用方法，以及它们的常用场景和示例代码。学会用这两个指令能够帮助我们编写更加灵活和易于维护的前端代码，有助于提高我们的开发效率。希望本文对你有所帮助，祝你学习愉快！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6495263848841e989426b5fe