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 ... 
随机推荐
- MySQL集群安装与配置
			MySQL集群安装与配置 文章目录 [隐藏] 一.mysql集群安装 二.节点配置 三.首次启动节点 四.测试服务是否正常 五.安全关闭和重启 MySQL Cluster 是 MySQL 适合于分 ... 
- 阿里重磅开源全球首个批流一体机器学习平台Alink,Blink功能已全部贡献至Flink
			11月28日,Flink Forward Asia 2019 在北京国家会议中心召开,阿里在会上发布Flink 1.10版本功能前瞻,同时宣布基于Flink的机器学习算法平台Alink正式开源,这也是 ... 
- Android内嵌网页webview点击其中的链接跳转到我们应用内的Activity
			在一个大的Android项目中,由于客户端来不及更新和实现,经常会内嵌一些网页(在一些大型的互联网公司,PC的产品总是跑在客户端的前面),比如活动页面,通常可以内嵌用html5实现的页面,可以适配手机 ... 
- 网页分页page
			public class PageBean { private int page; // 第几页 private int pageSize; // 每页记录数 private int start; / ... 
- linux/Unix下的vim/vi指令的使用方法
			概述 以下这篇文章介绍的是关于vim的使用方法,由于我本身对linux没有太多的研究,写下的这篇文章纯属是在实际中经常使用vim指令,想通过这篇文章记录下来,方便以后使用时查找方便.个人认为,对于普通 ... 
- Handling Configuration Changes with Fragments
			This post addresses a common question that is frequently asked on StackOverflow: What is the best wa ... 
- 麦子lavarel---10、一些第三方应用注意
			麦子lavarel---10.一些第三方应用注意 一.总结 一句话总结: 其实把重要的几个功能弄一个就好了,邮箱验证,手机号验证,支付验证,都是调用第三方接口,也很简单 1.关于页面和服务端校验的看法 ... 
- Oracle JET(一)Oracle JET介绍
			Oracle JET (Oracle Javascript Extension Toolkit)是一款 Oracle 的 JavaScript 拓展工具包.简单来说 Oracle JET 是一个一堆好 ... 
- CentOS yum 安装历史版本 java
			1.以1.6为例,找到对应版本 $ yum --showduplicate list java* |grep 1.6 java--openjdk.x86_64 :1.6.0.41-1.13.13.1. ... 
- PROD异机全备份恢复验证实施文档
			PROD异机全备份恢复验证实施文档 ******利用10月25日的全量备份.10月26日当天的归档日志及当前redo日志,恢复数据库到故障前数据库状态****** 准备工作:source 源库:PRO ... 
