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 来定义一个组件的模板，然后在使用时动态地渲染这个模板。这可以让我们实现一个可复用的组件。
以下是一个示例代码：
// www.javascriptcn.com code example
<ng-template #myComponent let-name let-gender="male">
<div>
<h2>{{name}}</h2>
<p>Gender: {{gender}}</p>
</div>
</ng-template>
<ng-container *ngTemplateOutlet="myComponent; context: {name: 'Alice', male: true}"></ng-container>
<ng-container *ngTemplateOutlet="myComponent; context: {name: 'Bob', male: false}"></ng-container>上面的代码定义了一个名为 myComponent 的模板，在模板中使用 let 关键字为 name 和 gender 变量赋值。然后我们在两个 ng-container 容器中分别渲染了这个模板，并且传递了不同的数据。
2. 使用 ng-template 实现条件渲染
我们可以使用 ng-template 来定义一个条件渲染的模板。在这个模板中，我们可以根据条件渲染不同的内容。
以下是一个示例代码：
// www.javascriptcn.com code example
<ng-container *ngIf="showTemplate; else noTemplate">
<ng-template #myTemplate>
<div>
<h2>{{title}}</h2>
<p>{{content}}</p>
</div>
</ng-template>
<ng-container *ngTemplateOutlet="myTemplate; context: {title: 'Template', content: 'This is a template.'}"></ng-container>
</ng-container>
<ng-template #noTemplate>
<p>No template is available!</p>
</ng-template>上面的代码使用了 ngIf 指令来控制模板的显示。当 showTemplate 变量为 true 时，会渲染 myTemplate 模板，而当 showTemplate 变量为 false 时，则会渲染 noTemplate 模板。
3. 使用 ng-template 实现内容投影
我们可以使用 ng-template 来实现内容投影。在这种情况下，我们可以将一个组件的内部结构暴露给外部组件，并且允许外部组件自定义这个内部结构。
以下是一个示例代码：
// www.javascriptcn.com code example
<ng-template #cardContent>
<div>
<img [src]="image">
<h2>{{title}}</h2>
<p>{{content}}</p>
</div>
</ng-template>
<Card>
<ng-container *ngTemplateOutlet="cardContent; context: {image: 'myImage.jpg', title: 'My card', content: 'This is my card.'}"></ng-container>
</Card>上面的代码定义了一个名为 cardContent 的模板，它将图像、标题和内容组合在一起。然后我们将这个模板注入到了 Card 组件中，使用 ngTemplateOutlet 指令将其渲染出来。在使用时，我们可以自定义图像、标题和内容，从而生成不同的卡片。
小结
ng-template 是 Angular 中非常强大的一个指令，它可以用来实现数据渲染、可复用组件、条件渲染和内容投影等功能。在 Angular 中，使用 ng-template 可以帮助我们更加简洁、高效地实现我们的业务需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bc56aba231b2b7edddf04f