Angular的_zone.onMicrotaskEmpty最终会通过changeDetect重新刷新视图

简介: Angular的_zone.onMicrotaskEmpty最终会通过changeDetect重新刷新视图

image.png

class ApplicationRef {

   /** @internal */

   constructor(_zone, _console, _injector, _exceptionHandler, _componentFactoryResolver, _initStatus) {

       this._zone = _zone;

       this._console = _console;

       this._injector = _injector;

       this._exceptionHandler = _exceptionHandler;

       this._componentFactoryResolver = _componentFactoryResolver;

       this._initStatus = _initStatus;

       /** @internal */

       this._bootstrapListeners = [];

       this._views = [];

       this._runningTick = false;

       this._enforceNoNewChanges = false;

       this._stable = true;

       /**

        * Get a list of component types registered to this application.

        * This list is populated even before the component is created.

        */

       this.componentTypes = [];

       /**

        * Get a list of components registered to this application.

        */

       this.components = [];

       this._enforceNoNewChanges = isDevMode();

       this._zone.onMicrotaskEmpty.subscribe({

           next: () => {

               this._zone.run(() => {

                   this.tick();

               });

           }

       });

tick方法的实现会调用视图view的detectChange方法:/**

    * Invoke this method to explicitly process change detection and its side-effects.

    *

    * In development mode, `tick()` also performs a second change detection cycle to ensure that no

    * further changes are detected. If additional changes are picked up during this second cycle,

    * bindings in the app have side-effects that cannot be resolved in a single change detection

    * pass.

    * In this case, Angular throws an error, since an Angular application can only have one change

    * detection pass during which all change detection must complete.

    */

   tick() {

       if (this._runningTick) {

           throw new Error('ApplicationRef.tick is called recursively');

       }

       try {

           this._runningTick = true;

           for (let view of this._views) {

               view.detectChanges();

           }

           if (this._enforceNoNewChanges) {

               for (let view of this._views) {

                   view.checkNoChanges();

               }

           }

       }

       catch (e) {

           // Attention: Don't rethrow as it could cancel subscriptions to Observables!

           this._zone.runOutsideAngular(() => this._exceptionHandler.handleError(e));

       }

       finally {

           this._runningTick = false;

       }

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

目录
相关文章
|
5月前
|
JavaScript 开发者 UED
Angular 视图数据模型变化导致重新计算模板中的表达式的技术原理
Angular 视图数据模型变化导致重新计算模板中的表达式的技术原理
|
前端开发 JavaScript
【Angular教程】组件动效/动态组件/视图封装模式
【Angular教程】组件动效/动态组件/视图封装模式
247 0
【Angular教程】组件动效/动态组件/视图封装模式
|
程序员 C++
深入学习SAP UI5框架代码系列之八:谈谈 SAP UI5 的视图控件 ID,以及 SAP UI5 视图和 Angular 视图的异同
深入学习SAP UI5框架代码系列之八:谈谈 SAP UI5 的视图控件 ID,以及 SAP UI5 视图和 Angular 视图的异同
深入学习SAP UI5框架代码系列之八:谈谈 SAP UI5 的视图控件 ID,以及 SAP UI5 视图和 Angular 视图的异同
|
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
|
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月前
|
开发者 Java 开发框架
JSF与EJB,打造企业级应用的神器!让你的Web应用更加稳定、高效!
【8月更文挑战第31天】在现代企业级应用开发中,JSF(JavaServer Faces)与EJB(Enterprise JavaBeans)是两大核心技术。JSF作为一款基于Java的Web应用框架,以其丰富的UI组件和表单处理功能著称;EJB则专注于提供分布式事务处理及远程调用等企业级服务。两者的结合为企业应用带来了高效便捷的开发模式。下文将通过一个简单的示例展示如何利用JSF进行用户信息的输入与保存,并借助EJB实现相关业务逻辑。尽管这一组合具有明显优势,但在实际应用中还需考虑其局限性并作出合理选择。
43 0
|
2月前
|
开发者 安全 SQL
JSF安全卫士:打造铜墙铁壁,抵御Web攻击的钢铁防线!
【8月更文挑战第31天】在构建Web应用时,安全性至关重要。JavaServer Faces (JSF)作为流行的Java Web框架,需防范如XSS、CSRF及SQL注入等攻击。本文详细介绍了如何在JSF应用中实施安全措施,包括严格验证用户输入、使用安全编码实践、实施内容安全策略(CSP)及使用CSRF tokens等。通过示例代码和最佳实践,帮助开发者构建更安全的应用,保护用户数据和系统资源。
39 0
|
2月前
|
容器 iOS开发 Linux
震惊!Uno Platform 响应式 UI 构建秘籍大公开!从布局容器到自适应设计,带你轻松打造跨平台完美界面
【8月更文挑战第31天】Uno Platform 是一款强大的跨平台应用开发框架,支持 Web、桌面(Windows、macOS、Linux)及移动(iOS、Android)等平台,仅需单一代码库。本文分享了四个构建响应式用户界面的最佳实践:利用布局容器(如 Grid)适配不同屏幕尺寸;采用自适应布局调整 UI;使用媒体查询定制样式;遵循响应式设计原则确保 UI 元素自适应调整。通过这些方法,开发者可以为用户提供一致且优秀的多设备体验。
47 0
下一篇
无影云桌面