Angular ngTemplateOutlet 元素的学习笔记
*ngTemplateOutlet is used for two scenarios — to insert a common template in various sections of a view irrespective of loops or condition and to make a highly configured component.
将同一个 template 插入到一个视图不同的 sections 中。
例如，将 id 为 compantLogoTemplate 的模板，插入到同一个视图的不同位置去。也就是说，ngTemplateOutlet 的值是模板 id, 用 # 标识。
ngTemplateOutlet 也可以接收一些上下文参数：
这里 ngTemplateOutlet 传入的值不再是硬编码的模板 id ，而是 Component 属性 headerTemplate, bodyTemplate和 footerTemplate.
这些值需要消费者传入，因此在 Component 里定义 headerTemplate，bodyTemplate 等等时，需要加上@Input 的注解。
最后的消费代码：
Angular ngTemplateOutlet和 ng-content 的区别
参考文献：Everything you need to know about ng-template, ng-content, ng-container, and *ngTemplateOutlet in Angular
二者都能帮助 Angular 开发者实现高度可定制化的Component.
ng-content 只是简单地将消费者传入的内容进行显示。无法使用 ng-content 进行形如 ngTemplateOutlet 那样的条件渲染。
You have to show the content that is received from the parent with no means to make decisions based on the content.
更多Jerry的原创文章，尽在：“汪子熙”:
Angular ngTemplateOutlet 元素的学习笔记相关推荐
- Angular ng-template元素的学习笔记
ng-template: As the name suggests the ng-template is a template element that Angular uses with struc ...
- Angular ng-content元素的学习笔记
ng-content 的select 属性其实和 css 选择器的工作方式类似,用于帮助 Angular 找到投影内容在 DOM 中的正确放置位置. 我个人把ng-content理解成Componen ...
- Angular ng-container元素的学习笔记
下面这段代码,迭代items集合元素中每一个item,当且仅当item.id不为false时,才在页面显示item.name的属性值. 如果item.id为空,最后渲染的页面里会出现空的div, 这是 ...
- Angular 服务器端渲染的学习笔记(二)
官网地址:https://angular.io/guide/universal I have mainly used angular universal for SEO purposes. In th ...
- Angular Change Detection 的学习笔记
Angular 变化检测机制比 AngularJs 中的等效机制更透明且更易于推理.但是在某些情况下(例如在进行性能优化时),我们确实需要知道幕后发生了什么.因此,让我们通过以下主题深入了解变更检测: ...
- Angular 服务器端渲染的学习笔记(一)
官网链接:https://angular.io/guide/universal Angular Universal, a technology that renders Angular applica ...
- Angular 依赖注入的学习笔记
Angular官方文档 Specifying a provider token If you specify the service class as the provider token, the ...
- 4 指针运算_C++用指针访问数组元素（学习笔记：第6章 08）
用指针访问数组元素[1] 数组是一组连续存储的同类型数据,可以通过指针的算术运算,使指针依次指向数组的各个元素,进而可以遍历数组. 定义指向数组元素的指针 定义与赋值 例: int a[10], *p ...
- cout 数组_C++用指针访问数组元素（学习笔记：第6章 08）
用指针访问数组元素[1] 数组是一组连续存储的同类型数据,可以通过指针的算术运算,使指针依次指向数组的各个元素,进而可以遍历数组. 定义指向数组元素的指针 定义与赋值 例: int 等效的形式 经过上 ...
最新文章
- C# TCPClient简单示例
- Java中MySQL事务处理举例
- yolov5搭建环境_Yolov5环境配置和训练私有数据,YOLOv5,以及,私人
- ca 自建 颁发证书_自建 ca 及使用 ca 颁发证书
- 没有用户的可用性测试
- Box2D的Edge Shape的碰撞处理
- 批处理脚本学习笔记——程序猿版
- 数据库系统之NoSQL数据库系统
- 计算机网络基础知识点总结
- 软媒定时关机，电脑无法启动
- uni-app自定义二维码扫描及本地图片扫描
- git远程代码回滚_git 远程分支回滚
- mysql带中文日期转换_【MySQL】日期时间格式转换_MySQL
- 通过计算机名查找当前域用户名,局域网中怎样通过IP查找计算机名
- windows切换窗口，取消edge窗口为多个
- 【FPGA】Quartus Prime 20.1 精简版下载安装教程记录
- 微信小程序wxml和wxss样式
- Word及Excel文档的Python脚本处理
- 关于开机自启动qbo服务的讨论
- python用input输入list_python怎么用input函数输入一个列表