Angular 是一种流行的前端框架，它基于 TypeScript 编程语言。它的模板机制使得我们能够将数据和视图分离。ng-template 指令是 Angular 中一个强大的特性，它允许我们在模板中定义可复用的代码块，并且可以实现数据渲染。
ng-template 简介
ng-template 是 Angular 中的一个指令，它不会在 DOM 中创建任何元素。它允许我们在模板中定义一个块级别的代码片段，可以用来实现循环、条件渲染等功能。ng-template 仅仅是一个容器，没有任何实际的渲染。
ng-template 的使用方式
在 Angular 中，我们可以使用 ng-template 指令来定义一个模板片段。这个模板片段可以在父组件中被调用和渲染。
以下是一个简单的示例代码：
<ng-template #myTemplate let-items> <ul> <li *ngFor="let item of items"> {{item}} </li> </ul> </ng-template>
上面的代码定义了一个名为 myTemplate 的模板。它包含了一个 ul 和 li 元素，通过 ngFor 指令实现了一个数据循环渲染的效果。
在这个模板中，我们使用了 let 关键字来定义了一个名为 items 的变量。这个变量会被用来在父组件中传递数据。在父组件中，可以使用 ngTemplateOutlet 指令来渲染这个模板。
以下是一个示例代码：
<ng-container *ngTemplateOutlet="myTemplate; context: {items: ['item1', 'item2', 'item3']}"></ng-container>
上面的代码使用了 ngTemplateOutlet 指令来渲染 myTemplate 模板。我们通过 context 选项将数据 items 传递给了这个模板。在渲染时，Angular 会将 items 变量的值进行替换，生成具体的列表。
ng-template 的高级使用
除了上面的基本用法之外，我们还可以将 ng-template 与其他 Angular 指令进行结合使用。下面是几个常见的用法：
1. 使用 ng-template 实现可复用的组件
我们可以使用 ng-template 来定义一个组件的模板，然后在使用时动态地渲染这个模板。这可以让我们实现一个可复用的组件。
以下是一个示例代码：
-- -------------------- ---- ------- ------------ ------------ -------- ------------------ ----- ----------------- ---------- -------------- ------ -------------- ------------- ------------------------------- -------- ------ -------- ----- ---------------------- ------------- ------------------------------- -------- ------ ------ ----- -----------------------展开代码
上面的代码定义了一个名为 myComponent 的模板，在模板中使用 let 关键字为 name 和 gender 变量赋值。然后我们在两个 ng-container 容器中分别渲染了这个模板，并且传递了不同的数据。
2. 使用 ng-template 实现条件渲染
我们可以使用 ng-template 来定义一个条件渲染的模板。在这个模板中，我们可以根据条件渲染不同的内容。
以下是一个示例代码：
-- -------------------- ---- ------- ------------- -------------------- ---- ------------ ------------ ------------ ----- ------------------ ------------------ ------ -------------- ------------- ------------------------------ -------- ------- ----------- -------- ----- -- - ---------------------------- --------------- ------------ ------------ ----- -------- -- -------------- --------------展开代码
上面的代码使用了 ngIf 指令来控制模板的显示。当 showTemplate 变量为 true 时，会渲染 myTemplate 模板，而当 showTemplate 变量为 false 时，则会渲染 noTemplate 模板。
3. 使用 ng-template 实现内容投影
我们可以使用 ng-template 来实现内容投影。在这种情况下，我们可以将一个组件的内部结构暴露给外部组件，并且允许外部组件自定义这个内部结构。
以下是一个示例代码：
-- -------------------- ---- ------- ------------ ------------- ----- ---- -------------- ------------------ ------------------ ------ -------------- ------ ------------- ------------------------------- -------- ------- -------------- ------ --- ------ -------- ----- -- -- ------------------------ -------展开代码
上面的代码定义了一个名为 cardContent 的模板，它将图像、标题和内容组合在一起。然后我们将这个模板注入到了 Card 组件中，使用 ngTemplateOutlet 指令将其渲染出来。在使用时，我们可以自定义图像、标题和内容，从而生成不同的卡片。
小结
ng-template 是 Angular 中非常强大的一个指令，它可以用来实现数据渲染、可复用组件、条件渲染和内容投影等功能。在 Angular 中，使用 ng-template 可以帮助我们更加简洁、高效地实现我们的业务需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bc56aba231b2b7edddf04f
