在 Angular 模板中，ng-template 是一个非常有用的指令，它可以让我们定义一段模板代码，并在需要的时候进行引用。ng-template 可以用于各种场景，比如条件渲染、循环渲染、模态框等等。本文将详细介绍 ng-template 的应用，包括如何定义和引用 ng-template，以及如何在其中使用变量和指令。
定义 ng-template
ng-template 可以通过 ng-template 指令来定义，它的语法如下：
<ng-template #templateName> <!-- 模板内容 --> </ng-template>
其中，#templateName 是这个 ng-template 的名称，我们可以通过这个名称来引用它。模板内容可以包含任意的 HTML 和 Angular 模板语法。
引用 ng-template
ng-template 可以通过 ng-container 或者 ng-template 指令来引用。ng-container 是一个类似于 div 的容器元素，它不会在页面中渲染出来，而 ng-template 则可以在页面中渲染出来。
使用 ng-container 引用 ng-template
ng-container 可以通过 ngTemplateOutlet 指令来引用 ng-template，它的语法如下：
<ng-container *ngTemplateOutlet="templateName"></ng-container>
其中，templateName 就是我们之前定义的 ng-template 的名称。这样，templateName 中定义的模板内容就会被引用到 ng-container 中。
使用 ng-template 引用 ng-template
ng-template 也可以通过 ngTemplateOutlet 指令来引用其他的 ng-template，它的语法如下：
<ng-template [ngTemplateOutlet]="templateName"></ng-template>
这里的 [ngTemplateOutlet] 是指令的输入属性，它的值是一个 ng-template，可以是定义在当前组件中的，也可以是从其他组件中传递过来的。
在 ng-template 中使用变量和指令
ng-template 中可以使用变量和指令，这些变量和指令可以在引用的时候传递进去。下面是一个示例，演示了如何在 ng-template 中使用变量和指令：
<ng-template #templateName let-title="title" let-items="items">
<h2>{{ title }}</h2>
<ul>
<li *ngFor="let item of items">{{ item }}</li>
</ul>
</ng-template>
<ng-container *ngTemplateOutlet="templateName; context: { title: 'My List', items: ['Item 1', 'Item 2', 'Item 3'] }"></ng-container>这里，我们在定义 ng-template 的时候，使用了 let-title 和 let-items 语法来定义了两个变量。在模板中，我们可以使用这两个变量来显示标题和列表项。在引用 ng-template 的时候，我们使用了 context 输入属性来传递 title 和 items 变量的值。
总结
ng-template 是一个非常有用的指令，它可以让我们定义一段模板代码，并在需要的时候进行引用。ng-template 可以用于各种场景，比如条件渲染、循环渲染、模态框等等。在 ng-template 中，我们可以使用变量和指令，这些变量和指令可以在引用的时候传递进去。希望这篇文章对您有所帮助。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65654aabd2f5e1655de8e00c