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'};
Angular ngTemplateOutlet的更多相关文章
- [Vue @Component] Pass Props Between Components with Vue Slot Scope & renderless component
Components with slots can expose their data by passing it into the slot and exposing the data using ...
- [Angular] Using ngTemplateOutlet to create dynamic template
I can use <tamplete> syntax and a entry component as a container to create a dynamic component ...
- [Angular] Angular Advanced Features - ng-template , ng-container, ngTemplateOutlet
Previously we have tab-panel template defined like this: <ul class="tab-panel-buttons" ...
- [Angular] Change component default template (ng-content, ng-template, ngTemplateOutlet, TemplateRef)
Here is the defulat tab header template: <ng-template #defaultTabHeader let-tabs="tabsX" ...
- Angular 向组件传递模板的几种方法
最近在写一个日期选择器组件,为了满足将来可能出现的各种需求,所以需要能够高度的自定义组件的样式.为了达到这个目的,需要能够在日期选择器组件外控制每个日期格子内要显示的内容,比如,标上节假日之类的.这时 ...
- Angular开发实践(八): 使用ng-content进行组件内容投射
在Angular中,组件属于特殊的指令,它的特殊之处在于它有自己的模板(html)和样式(css).因此使用组件可以使我们的代码具有强解耦.可复用.易扩展等特性.通常的组件定义如下: demo.com ...
- Angular动态创建组件之Portals
这篇文章主要介绍使用Angular api 和 CDK Portals两种方式实现动态创建组件,另外还会讲一些跟它相关的知识点,如:Angular多级依赖注入.ViewContainerRef,Por ...
- Angular开发技巧
由于之前有幸去参加了ngChina2018开发者大会,听了will保哥分享了Angular开发技巧,自己接触Angular也有差不多快一年的时间了,所以打算对Angular开发中的一些技巧做一个整理 ...
- Angular 4+ 修仙之路
Angular 4.x 快速入门 Angular 4 快速入门 涉及 Angular 简介.环境搭建.插件表达式.自定义组件.表单模块.Http 模块等 Angular 4 基础教程 涉及 Angul ...
随机推荐
- NOIP2017 D1T1 小凯的疑惑
洛谷P3951 看到题目,很容易想到这一题是求使ax+by=c(a,b,c∈N)无非负整数解的最大c 由裴蜀定理可知方程一定有整数解(a,b互素,gcd(a,b)=1|c) 解法一:暴力枚举 看到题目 ...
- poj 3613Cow Relays
Description For their physical fitness program, N (2 ≤ N ≤ 1,000,000) cows have decided to run a rel ...
- codevs 4064 组合 x
很久之前发过啦~不过删掉了...再发一下 4064 组合 时间限制: 1 s 空间限制: 256000 KB 题目等级 : 黄金 Gold 题解 查看运行结果 题目描述 Description 组合就 ...
- 设计模式学习笔记——Visitor 访问者模式
1.定义IVisitor接口,确定变化所涉及的方法 2.封装变化类.实现IVisitor接口 3.在实体类的变化方法中传入IVisitor接口,由接口确定使用哪一种变化来实现(封装变化) 4.在使用时 ...
- Android - Gradle架构中使用的“.so”库
Android使用Gradle架构的Android应用,需要对.so库做特殊的处理,因为会找不到,就会导致编译正确,使用错误:常见的使用情况是根据不同的cpu,有不同的库,包括:armeabi,mip ...
- 3D Computer Grapihcs Using OpenGL - 02 QGLWidget
用红色来填充GLWidget窗口 修改MyGlWindow.h,添加两个函数,一个用来初始化OpengGL,一个用来绘制OpenGL #pragma once #include <QtOpenG ...
- UE4联网测试的快捷方法
工程中测试 创建bat文件,格式如下: UE4Editor.exe路径 工程文件名 [地图名及参数] -game [其他自定义参数] UE4Editor.exe路径表示虚幻编辑器相应版本的UE4Edi ...
- Bazinga
Bazinga Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total Sub ...
- Day3 01 枚举
枚举:关键字 enum 主要为了限定了选择范围,声明了一组相关的值类型的集合. 1.枚举类型,实质上是整整 2.如果不进行赋值操作,枚举类型从0开始递增. 3.枚举不能定义字段 属性 方法. 例如 ...
- CentOS和Windows互相远程桌面方法
https://blog.csdn.net/libaineu2004/article/details/49407883