Angular ngTemplateOutlet

　　虽然我们可以通过使用 ViewContainerRef 将 ElementRef创建的视图插入指定的位置，但是仍然希望有某中快捷的方式帮我们实现。

　　ngTemplateOutlet与ngComponentOutlet 就是帮我们干这事的。

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'};

转载于:https://www.cnblogs.com/xianrongbin/p/10986333.html

Angular ngTemplateOutlet相关推荐

Angular ngTemplateOutlet 元素的学习笔记
*ngTemplateOutlet is used for two scenarios - to insert a common template in various sections of a v ...
Angular NgTemplateOutlet的一个例子
NgTemplateOutlet:Inserts an embedded view from a prepared TemplateRef. 语法: <ng-container *ngTempl ...
您需要了解有关Angular中的ng-template，ng-content，ng-container和* ngTemplateOutlet的所有信息...
It was one of those days when I was busy working on new features for my office project. All a sudden ...
Angular 指令ngTemplateOutlet的运行原理单步调试
看个具体的例子,我在Component html里用<ng container *ngTemplateOutlet定义了一个id为greet的template的插入点: #greet模板的内容: ...
ngzorro html源码,Angular 中 ngTemplateOutlet 的用法以及ng-zorro源码分析！
一.引言今天看到文章:https://segmentfault.com/a/1190000015944548 .于是专门研究一下ngTemplateOutlet用法!!!! 官方定义 : NgTem ...
Angular 富文本编辑之路的探索
作者:杨振兴 Worktile 前端工程师,PingCode Wiki 产品技术负责人 PingCode Wiki 提供结构化知识库来记载信息和知识,便于团队沉淀经验.共享资源,欢迎大家注册试用本文 ...
Angular动态创建组件之Portals
本文主要介绍使用Angular api 和 CDK Portals两种方式实现动态创建组件,另外还会讲一些跟它相关的内容.如:Angular多级依赖注入.ViewContainerRef,Portal ...
ngTemplateOutlet递归的问题
今天尝试通过 ng-template 加 ngTemplateOutlet实现一个递归的菜单.但是遇到一个问题:NullInjectorError: No provider for NzMenuDir ...
Angular 基于自定义指令的内容投影 content projection 问题的单步调试
问题描述本文涉及到的代码位置:https://github.com/wangzixi-diablo/ngDynamic 我有一个能接受内容投影的 Angular Component: 具体投影内容, ...

Angular ngTemplateOutlet

Angular ngTemplateOutlet相关推荐

最新文章

热门文章