Angular ng-content元素的学习笔记

简介: Angular ng-content元素的学习笔记

ng-content 的select 属性其实和 css 选择器的工作方式类似,用于帮助 Angular 找到投影内容在 DOM 中的正确放置位置。


我个人把ng-content理解成Component工厂,能根据用户指定的配置信息,动态生成Component,即configurable Component,这种行为称之为Content Projection.


They are used to create configurable components. This means the components can be configured depending on the needs of its user. This is well known as Content Projection. Components that are used in published libraries make use of ng-content to make themselves configurable.


看一个例子:

image.png

project-content footer区域的div里定义了ng-content.

客户如何将自己的UI内容注入到project-content中?image.pngimage.png

ng-content的select属性值,决定了具体哪些UI内容会被注入到ng-content里。


Here we have first select to render header h1 element. If the projected content has no h1 element it won’t render anything.


第一个select会渲染h1元素,如果被注入的内容中并没有h1元素,则Angular不会进行内容注入。


Similarly the second select looks for a div.


The rest of the content gets rendered inside the last ng-contentwith no select.


剩下的所有内容都被注入到最后一个不含select属性的ng-content中去。


消费该project-content的例子:

image.png

目录
相关文章
|
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 学习笔记
205 0
Angular library 学习笔记
|
设计模式 JavaScript 前端开发
Angular Lazy load(延迟加载,惰性加载) 机制和 feature module 的学习笔记
Angular Lazy load(延迟加载,惰性加载) 机制和 feature module 的学习笔记
344 0
Angular Lazy load(延迟加载,惰性加载) 机制和 feature module 的学习笔记
下一篇
无影云桌面