在 Angular 中，我们可以使用 ng-template 指令来定义模板，并通过 ng-container 指令来嵌套模板。这种方法可以让我们在组件中定义多个模板，并在需要的时候进行嵌套调用，从而实现更加灵活的组件设计。
基本用法
首先，我们可以在组件的模板中定义一个 ng-template 元素，并给它一个名字：
<ng-template #myTemplate> <p>Hello, world!</p> </ng-template>
然后，我们可以在同一个组件中使用 ng-container 元素来嵌套这个模板：
<ng-container *ngTemplateOutlet="myTemplate"></ng-container>
这样，我们就可以在组件中动态地使用 ng-template 指令来定义模板，并通过 ng-container 指令来嵌套模板。
模板嵌套
除了在同一个组件中嵌套模板，我们还可以在不同的组件中嵌套模板。例如，我们可以在一个父组件中定义一个模板，并在子组件中使用它：
<!-- 父组件 --> <ng-template #myTemplate> <p>Hello, world!</p> </ng-template> <!-- 子组件 --> <ng-container *ngTemplateOutlet="myTemplate"></ng-container>
这样，我们就可以在不同的组件中共享模板，从而实现更加灵活的组件设计。
模板传参
在使用 ng-template 指令时，我们还可以向模板中传递参数。例如，我们可以在模板中定义一个变量，并在使用模板时传递一个值：
<ng-template #myTemplate let-name>
<p>Hello, {{ name }}!</p>
</ng-template>
<ng-container *ngTemplateOutlet="myTemplate; context: { name: 'world' }"></ng-container>这样，我们就可以在模板中使用传递进来的变量，从而实现更加灵活的模板设计。
总结
在 Angular 中，ng-template 指令和 ng-container 指令可以帮助我们实现模板的嵌套和传参。通过这种方法，我们可以实现更加灵活的组件设计，并提高代码的复用性和可维护性。如果你想深入学习 Angular 中的模板语法和组件设计，建议阅读官方文档并进行实践。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6516865a95b1f8cacded8118