在 Angular 中，ng-template 指令是一个非常实用的指令，用于定义和封装重复使用的 UI 片段。它可以在多种场景下使用，例如：将常用的 HTML 片段定义为可重用的组件，定义列表项的样式，以及定义带条件的 UI 片段等。
ng-template 的基本用法
ng-template 可以定义在一个容器元素内部，并给它一个名字，例如：
<ng-template #myTemplate> <!-- 自定义的 HTML 片段 --> </ng-template>
当需要使用该模板时，只需要在宿主组件中使用 ng-container 元素，并通过 ngTemplateOutlet 属性将模板引入进来：
<ng-container *ngTemplateOutlet="myTemplate"></ng-container>
上面的示例中，ng-container 指令会将 myTemplate 模板渲染进来，并替换掉 ng-container 的位置。
ng-template 的高级应用
ng-template 指令不仅可以作为普通的重用的UI组件，它也可以通过指定变量、属性和上下文绑定等特性，实现更灵活的需求。下面是一些高级应用的例子。
使用上下文绑定
当需要在重复的 UI 片段中使用当前宿主组件中的数据时，可以使用上下文绑定实现。例如：
<ng-template #myTemplate let-name="name">
<p>Hello, {{name}}!</p>
</ng-template>
<ng-container *ngTemplateOutlet="myTemplate; context: {name: 'John'}"></ng-container>上面的示例中，通过 let-name="name" 声明了一个名为 name 的变量，并在模板中使用了该变量。在宿主组件中，通过 context 属性，将 name 变量绑定到了 'John' 字符串，从而实现了动态绑定。
使用 ngIf 条件渲染
在某些场景下，我们需要根据条件来渲染特定的 UI 片段。这时可以使用 ngIf 指令来实现。例如：
<ng-template #myTemplate let-name="name" let-greeting="greeting">
<div *ngIf="name">
{{greeting}}，{{name}}！
</div>
</ng-template>
<ng-container *ngTemplateOutlet="myTemplate; context: {name: 'John', greeting: 'Good morning'}"></ng-container>
<ng-container *ngTemplateOutlet="myTemplate; context: {greeting: 'Good evening'}"></ng-container>上面的示例中，通过 ngIf 指令来判断 name 是否存在，如果存在，则渲染包含 name 的 UI 片段，否则忽略。这样就可以实现根据条件来动态渲染 UI 片段的需求。
总结
ng-template 是一个非常实用和灵活的指令，它可以帮助我们实现重复的 UI 片段的封装和重用，而且还支持上下文绑定和条件渲染等高级应用。在日常的前端开发中，掌握 ng-template 的用法可以提高开发效率和代码的可重用性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/651cf89995b1f8cacd47c62b