angular中动态传入模板-ngTemplateOutlet

最新推荐文章于 2023-11-16 14:31:56 发布

原创最新推荐文章于 2023-11-16 14:31:56 发布 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍Angular中如何使用ngTemplateOutlet实现在组件中动态传递参数，通过具体示例展示了ngTemplateOutlet的基本用法及如何在模板中绑定上下文变量，使组件更加灵活。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在写公共组件的时候可以通过ng-content实现类似vue的slot的效果，但是使用ng-content不能动态的传参，所以在写组件的时候会受到很大的限制，而ngTemplateOutlet可以动态传参

ngTemplateOutlet

插入ng-template创建的内嵌视图

简单例子

<div *ngTemplateOutlet="tpl1"></div>
<ng-template #tpl1>
  <span>I am span in template {{title}}</span>
</ng-template>

按照官方文档，其语法知识如下： *ngTemplateOutlet = "templateRefExp; content: contentExp "

　　 templateRefExp: ng-template 元素的#ID

　　 contextExp:

　　　　　　1、可空参数；

　　　　　　2、可以在模版中使用 let-key 语句进行绑定；这个key,是我们在HTML模版绑定显示的key,即 {{key}} 。

　　　　　　3、使用 $implicit 这个key会把对应的值设置为默认值；

　　　　　　　因为我们会为content指定一个对象，每个对象可能有一个或多个值；

　　　　　　　如果这个对象，是一个值，则不需显示指定名称，如 student : { name: 'jack' } ,可以用 student: { $implicit: 'jack' };

　　　　　　　　在 ng-template 中也不必使用 let-showName = "name", 只需要 let-showName 即可。

　　　　如下例子：

　　　HTML文件：
　　　　　　<ng-container *ngTemplateOutlet="tplStu; context: student"></ng-container>
　　　　　　<ng-template #tplStu let-name let-ageHTML="age">hello {{name}},your age is {{ageHTML}}</ng-template>

　　　　.ts文件

         student = { $implicit: 'jack' , age: '19'};