Angular ng-template元素的学习笔记
ng-template: As the name suggests the ng-template is a template element that Angular uses with structural directives (*ngIf, *ngFor, [ngSwitch] and custom directives).
模板元素,伴随着Angular结构化指令比如*ngIf, *ngFor和ngSwitch等一起使用。
Angular wraps the host element (to which the directive is applied) inside ng-template and consumes the ng-template in the finished DOM by replacing it with diagnostic comments.
结构化指令施加的元素称为host元素,host元素被ng-template包裹,当Angular渲染页面时,会消费ng-template, 并在最终生成的DOM元素中加上一些diagnostic comment.
例子:
这个id为emotyList的ng-template,出现在structual directive *ngIf里,
host元素p被ng-template包裹:
另一个例子:
最后生成的原生html页面:
注意,如果ng-template没有配合structural指令而是单独使用,则host元素最后不会渲染出来。看个例子:
最后渲染的原生html页面,里面什么也没有:
以下两种方法能够让go home通过ng-template被显示:
其中方法1使用了解糖之后的原始ngIf指令,此时Angular只会简单将ng-template替换成comment,而ng-template内的内容原封不动地出现在最后的HTML页面中。
In this method, you are providing Angular with the de-sugared format that needs no further processing. This time Angular would only convert ng-template to comments but leaves the content inside it untouched (they are no longer inside any ng-template as they were in the previous case). Thus, it will render the content correctly.
参考链接:Everything you need to know about ng-template, ng-content, ng-container, and *ngTemplateOutlet in Angular
更多Jerry的原创文章,尽在:“汪子熙”:
Angular ng-template元素的学习笔记相关推荐
- Angular 项目里 angular.json 文件内容的学习笔记
看一个基于 Angular 的 SAP Spartacus 项目里 angular.json 的例子: version: The configuration-file version. newProj ...
- Angular ngTemplateOutlet 元素的学习笔记
*ngTemplateOutlet is used for two scenarios - to insert a common template in various sections of a v ...
- 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里的RouterOutlet指令学习笔记
官网:https://angular.io/api/router/RouterOutlet#description Acts as a placeholder that Angular dynamic ...
- Angular 服务端渲染(SSR) 学习笔记
文章目录 1 服务器端渲染 (SSR) 2 SSR的利弊 2.1 SSR的优势 2.2 SSR的局限 3 Angular Universal 3.1 Node.js Express web serve ...
- ng bootstrap css,Angular2学习笔记-ng bootstrap中motal组件使用
ng bootstrap是一个angular UI bootstrap库,里面包含了一些基本的UI组件(日期选择组件,按钮,下拉框等).目前的版本为v1.0.0-alpha.14,基于angular2 ...
- 4 指针运算_C++用指针访问数组元素(学习笔记:第6章 08)
用指针访问数组元素[1] 数组是一组连续存储的同类型数据,可以通过指针的算术运算,使指针依次指向数组的各个元素,进而可以遍历数组. 定义指向数组元素的指针 定义与赋值 例: int a[10], *p ...
- 模板方法模式(Template Method Pattern)学习笔记
模板方法模式可以所是最为常见的一种设计模式了,出乎很多人意料的是,很多人已经在他们的代码中用到了模板方法模式而没有意识到自己用到了这个模式,模板方法模式几乎可以在所有的抽象基类中找到. 通过模板方法模 ...
最新文章
- oracle视图能增删改,oracle视图的增删改
- 构建之法 第6~7章读后感和对Scrum的理解
- node.js安装模式 的区别_如何使用nodejs写一个接口
- Palm pre,我的M8又要落伍了
- 作者:胡卫生,博士,上海交通大学教授、博士生导师。
- node-webkit学习(4)Native UI API 之window
- Flowable 6.6.0 Eclipse设计器 - 2.编辑器特性
- 电信wifi服务器不响应,电信老员工告诉你,为什么你家WiFi信号满格却上不了网?...
- 打印机登录无密码计算机,无密码,引发共享打印机拒绝访问故障
- 断食、清肠 三日记录
- pygame: libpng warning: iCCP: known incorrect sRGB profile 报错
- Typora如何把图片上传到图床smms.app
- 表示学习(Representation Learning)
- 给予Java初学者的学习路线建议
- HDOJ 2010 水仙花数
- java怎么给文本框加滚动条_懂Java中Swing的朋友,谁能帮我在Jtextare上加一个滚动条啊?很急!...
- Mp异常:xxx. Not Found TableInfoCache
- 由PVID引起的故障现象
- 斜坡函数有条长长的尾巴
- python文件式和交互式道路标志_其它课程中的python---4、Matplotlib最最最最简单使用...