Angular ng-template元素的学习笔记

简介: 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里,

image.pngimage.pngimage.pngimage.pngimage.pngimage.pngimage.png

其中方法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


目录
相关文章
|
1月前
|
容器
angular之ng-template
angular之ng-template
|
5月前
|
JavaScript
【讲人话】Angular如何通过@ViewChildren获取实时渲染的动态DOM节点元素(@ViewChild只能获取静态的固定DOM节点)
【讲人话】Angular如何通过@ViewChildren获取实时渲染的动态DOM节点元素(@ViewChild只能获取静态的固定DOM节点)
|
11月前
|
存储 JSON 前端开发
关于 Angular SSR 应用 index.html 中的 serverApp-state script 元素
关于 Angular SSR 应用 index.html 中的 serverApp-state script 元素
Angular SSR 应用的 SEO 实现一个例子 - meta 和 title 元素的赋值
Angular SSR 应用的 SEO 实现一个例子 - meta 和 title 元素的赋值
|
存储 缓存 JavaScript
Angular Universal 学习笔记
Angular Universal 学习笔记
|
前端开发 JavaScript API
Angular Change Detection 的学习笔记
Angular Change Detection 的学习笔记
|
存储 缓存 JavaScript
Angular Universal 学习笔记
Angular Universal 学习笔记
131 0
Angular Universal 学习笔记
|
JavaScript
Angular Form (响应式Form) 学习笔记
Angular Form (响应式Form) 学习笔记
184 0
Angular Form (响应式Form) 学习笔记
|
JSON API 数据格式
Angular CLI builder 学习笔记
Angular CLI builder 学习笔记
122 0
Angular CLI builder 学习笔记
|
JavaScript 测试技术 API
Angular library 学习笔记
Angular library 学习笔记
207 0
Angular library 学习笔记