Angular ngIf 指令的工作原理

简介: Angular ngIf 指令的工作原理

Represents a container where one or more views can be attached to a component.

Can contain host views (created by instantiating a

component with the createComponent() method), and embedded views

(created by instantiating a TemplateRef with the createEmbeddedView() method).

A view container instance can contain other view containers,

creating a view hierarchy.

@see ComponentRef

@see EmbeddedViewRef

@publicApi

@abstract

*/

class ViewContainerRef {

}

ViewContainerRef可以包含Host view和embedded view.


给原型链上设置函数,都是空的实现:


image.png执行template函数:image.png调用NgIf_Factory工厂函数:image.pngNgIf构造函数里两个参数,应用开发人员可以直接使用:image.png第二次进入到executeTemplate方法:image.pngimage.pngimage.pngimage.png在此处绘制视图:image.pngimage.pngimage.pngimage.png最后的comment节点,值从container变成了如下的注释:image.png而一开头发现的comment节点,是什么时候创建的?

image.png这个container的值什么时候被替换的?image.pngimage.pngimage.png

相关文章
|
2月前
|
Java Spring
🔥JSF 与 Spring 强强联手:打造高效、灵活的 Web 应用新标杆!💪 你还不知道吗?
【8月更文挑战第31天】JavaServer Faces(JSF)与 Spring 框架是常用的 Java Web 技术。本文介绍如何整合两者,发挥各自优势,构建高效灵活的 Web 应用。首先通过 `web.xml` 和 `ContextLoaderListener` 配置 Spring 上下文,在 `applicationContext.xml` 定义 Bean。接着使用 `@Autowired` 将 Spring 管理的 Bean 注入到 JSF 管理的 Bean 中。
37 0
|
2月前
|
JavaScript
如何在 Angular 中使用 ViewChild 来访问子组件、指令或 DOM 元素
如何在 Angular 中使用 ViewChild 来访问子组件、指令或 DOM 元素
24 0
|
2月前
|
索引
Angular 中的 ngFor 指令
Angular 中的 ngFor 指令
35 0
|
2月前
|
JavaScript
如何在自定义 Angular 指令中使用 @HostBinding 和 @HostListener
如何在自定义 Angular 指令中使用 @HostBinding 和 @HostListener
29 0
|
5月前
|
JavaScript 前端开发 编译器
Angular 中的结构指令运行时的工作原理
Angular 中的结构指令运行时的工作原理
|
5月前
|
JavaScript 前端开发 API
vue的双向绑定的原理,和angular的对比
vue的双向绑定的原理,和angular的对比
97 0
|
11月前
|
JSON 搜索推荐 数据格式
Angular SSR 应用中 serverApp-state script 的工作原理介绍
Angular SSR 应用中 serverApp-state script 的工作原理介绍
|
JavaScript
Angular @Inject 注解的实际应用例子和工作原理浅析
Angular @Inject 注解的实际应用例子和工作原理浅析
|
21天前
|
缓存 JavaScript 前端开发
Angular 应用打包和部署
Angular 应用打包和部署
55 1
|
2月前
|
应用服务中间件 Java Maven
掌控视图的力量!深入解析 JSF 视图管理,揭秘视图生命周期的秘密,让你的应用更高效!
【8月更文挑战第31天】JavaServer Faces (JSF) 是一种强大的框架,用于管理 Web 应用程序的视图。本文通过具体案例介绍 JSF 视图管理的基础知识,包括创建、管理和销毁视图的过程。首先,在 Eclipse 中创建一个新 JSF 项目,并配置 Maven 依赖。接着,在 `WEB-INF` 目录下配置 `web.xml` 文件,设置 JSF servlet。
37 0
下一篇
无影云桌面