vb.net变量值变化触发事件_Angular变化检测的理解

获取脏检查的时机

Angular 使用NgZone获取变化的通知,然后进行全面的变化检测,进而更新Dom

脏检查的过程

Angular的数据流是自顶而下,从父组件到子组件单项流动,单项数据流保证了高效可预测的变化检测。尽管检查了父组件之后,子组件可能会改变父组件的数据使得父组件需要再次被检查,这是不被推荐的数据处理方式。在开发模式下Angular会进行二次检查,如果出现上述情况,二次检查就会报错:Expression Changed After It Has Been Checked Error。而在生产环境中,脏检查只会执行一次。

变化检测策略

Default

通过NgZone代理的每个异步操作的构造函数中,对组件进行全面的脏检查,进而更新显示

OnPush

相比Default只需要在@Component装饰器中加上一句

changeDetection:ChangeDetectionStrategy.OnPush

组件级别的控制,这种模式下,变化检测变的相对严格,不是所有异步操作都会导致组件进行变化检测,这一定程度上保证了程序的性能,但是也给组件的编写增加了复杂性,经常需要自己手动操作变化检测来确保界面及时响应。

隔离当前组件及子组件

组件使用OnPush模式后, 外部执行 (setTimeout、http request、事件、Observable订阅)想触发我组件的变化检测就变得困难,如果确定需要更新界面就需要手动调用变化检测,可以使用markForCheck方法。

外部执行 只有对这个组件中的数据进行修改了,我们才期望变化检测能够检测出数据的变化从而更新组件的显示,这里的外部执行的代码大部分情况下其实是我的组件的内部的代码,只不过因为执行的是异步操作,而这个操作终止时Angular并不知道从哪里开始进行变化检测,所以Angualr开始从组件树的顶层开始向下检查,到达当前组件时发现它属于OnPush模式而数据输入并没有改变所以就不在进行变化检测,所以需要手动调用检查,这也保证了,在其它组件中的异步执行不会触发到当前组件的变化检测(因为根本不相关),从而提高性能。

同步事件 会触发当前组件以及它所在组件树的所有祖先和后代组件的变化检测,不在一个分支上的组件不会检测,比如我的组件使用OnPush模式,组件模板中有一个按钮,按钮的事件处理修改组件的数据,这个事件可以直接触发组件的变化检测,无需单独调用检测,并且这个检测会在当前组件的所有链条上传递即使组件是OnPush模式。

这个 同步事件 包括点击事件、ngModel值的更新等

问题

当组件使用OnPush模式时,如果我在组件的事件处理中修改一个变量,而这个变量需要通过NgModel传递给一个子组件,这个时候不会触发子组件的变化检测,也就是我传递一个值给NgModel不会显示到界面,这个问题也有人给Angular提了Issue,原因应该就是如下代码,更改ngModel值的过程被放到了一个异步处理,在执行的时候事件触发的变化检测已经完成,因为OnPush的原因该组件及子组件又不会重新触发变化检测,所以ngModel的值不会及时更新模板

private _updateValue(value: any): void {resolvedPromise.then(() => { this.control.setValue(value, {emitViewToModelChange: false}); });}

手动操作变化检测

constructor(private changeDectorRef:ChangeDetectorRef
){}
  • markForCheck() - 在组件的 metadata 中如果设置了 changeDetection:ChangeDetectionStrategy.OnPush 条件,那么变化检测不会再次执行,除非手动调用该方法, 该方法的意思是在变化监测时必须检测该组件。
  • detectChanges() - 从该组件到各个子组件执行一次变化检测

这块的理解很大一部分是老大的指点,鸣谢 @徐海峰

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/542360.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

python 算术右移_Python算术序列| 竞争编码问题

python 算术右移Question: 题: In mathematics, when in an arithmetic sequence is a sequence of numbers such that the difference between the consecutive terms is constant then it is called arithmetic constant. 在数学中,当在算术序列中是…

Android8内测申请,小米 6 安卓 8.0 来了 内测开始招募

Android 8.0 已经正式发布多时,目前不少厂商已经启动了旗下进行的 Android 8.0 适配计划。但令人纳闷的是,一向对系统升级比较热心的小米却迟迟没有动静。好消息是,此前网友曝光的消息显示,MIUI 已经悄然在官方论坛中招募小米 6 的…

My linux

为什么80%的码农都做不了架构师?>>> 1.linux 命令方式修改机器名称 # hostname newHostName # vi /etc/sysconfig/network 修改或增加配置:hostnamenewHostName # vi /etc/hosts 修改对应的本地HOST映射 xx.xxx.xxx.xxx newHostName 2.Redha…

狂神说es笔记_人教版七上英语Unit5电子课本音频+课堂笔记+课后同步习题

1人教 七上英语Unit5单词七年级英语上册Unit 5单词默写1做;干(助动词)__________2做,干(助动词第三人称单数形式)__________3有__________4网球__________5球__________6乒乓球______7球棒;球拍__________8(英式)足球____________________9排…

Java RandomAccessFile getFilePointer()方法与示例

RandomAccessFile类getFilePointer()方法 (RandomAccessFile Class getFilePointer() method) getFilePointer() method is available in java.io package. getFilePointer()方法在java.io包中可用。 getFilePointer() method is used to get the current pointer in the Rando…

先进技术android,React Native实战(JavaScript开发iOS和Android应用)/计算机科学先进技术译丛...

导语内容提要本书作者Nader Dabit是AWS Mobile开发人员、React Native Training创始人和React Native Radio播客主持人。本书旨在帮助iOS、Android和Web开发人员学习使用React Native框架,构建高质量的iOS和Android应用程序。书中介绍了React Native入门基础知识&am…

开发类似vs的黑色风格_传闻:2020年《使命召唤》将是《黑色行动》重启作品

据可信度较高的消息源透露,2020 年的《使命召唤》将是《黑色行动》的重启作。而据之前的报道,《黑色行动》开发商 Treyarch 正在开发今年的《使命召唤》, Sledgehammer Games 和 Raven Software 负责辅助工作。该项目代号为“宙斯”&#xff…

ubuntu中 不同JDK版本之间的切换

Ubuntu中JDK 的切换前提是同时安装了多个版本,如jdk7和jdk8,若要切换,在终端输入: sudo update-alternatives --config javasudo update-alternatives --config javac

osi模型:七层模型介绍_联网| OSI模型能力问题和解答 套装1

osi模型:七层模型介绍1) There are the following statements that are given below, which of them are correct about the OSI model? The OSI model is a reference model that describes the network functionalities.The OSI model is an implemented model that describ…

华为鸿蒙系统正式登场,华为自研鸿蒙系统将于8月9日正式登场,还有全新的鸿鹄芯片...

最近华为发布了很多手机:荣耀20系列手机、荣耀9X系列、华为Nova 5系列,以及7月26日发布的华为Nova5i Pro和华为首部5G手机Mate20 X 5G版,这些手机将成为华为下半年的出货主力,市场份额能否超过50%就看这些手机的表现了。华为还将在…

pythonencode和decode_Python3的decode()与encode()

python3的decode()与encode()Tags: Python Python3对于从python2.7过来的人,对python3的感受就是python3对文本以及二进制数据做了比较清晰的区分。文本总是Unicode,由str类型进行表示,二进制数据使用bytes进行表示,不会将str与bytes偷偷的混…

微信小程序 开发 微信开发者工具 快捷键

微信小程序已经跑起来了.快捷键设置找了好久没找到,完全凭感觉.图贴出来.大家看看. 我现在用的是0.10.101100的版本,后续版本更新快捷键也应该不会有什么变化. 现在貌似不能修改.如果有同学找到修改的方法,麻烦告诉我.谢谢. 微信小程序代码编辑快捷键 常用快捷键 格式调整 Ctrl…

java 根据类名示例化类_Java MathContext类| 带示例的getRoundingMode()方法

java 根据类名示例化类MathContext类的getRoundingMode()方法 (MathContext Class getRoundingMode() method) getRoundingMode() method is available in java.math package. getRoundingMode()方法在java.math包中可用。 getRoundingMode() method is used to get the Roundi…

python中xy坐标如何从十个中找到最远的两个_python – Opencv单应性从像素xy坐标中查找全局xy坐标...

我试图找到变换矩阵H,以便我可以乘以(x,y)像素坐标并得到(x,y)真实世界坐标.这是我的代码:import cv2import numpy as npfrom numpy.linalg import invif __name__ __main__ :D[159.1,34.2]I[497.3,37.5]G[639.3,479.7]A[0,478.2]# Read source image.im_src cv2.…

[Android] Android统计Apk , jar包方法数

reference to : http://www.jianshu.com/p/61e8f803e0d1 Android在开发过程中,随着引用的库以及业务的增多,不可避免的会出现64K limit问题,也就是方法数过多的问题,Java代码中的Method总数和Field总数都不能超过65535个&#xff…

type c pin定义_在C中定义宏以设置和清除PIN的位

type c pin定义Given a PIN (value in HEX) and bit number, we have to SET and then CLEAR given bit of the PIN (val) by using Macros. 给定一个PIN(十六进制值)和位数,我们必须使用宏将SET(设置),然后清除给定的PIN(值)位(值)。 Macros definitio…

android9有深色模式吗,深色模式还是黑色模式?微信把所有人都搞懵了

原标题:深色模式还是黑色模式?微信把所有人都搞懵了前一阵子,微信正式加入了对“深色模式”的支持,这也是除了Windows Phone 版本以外微信第一次从系统层面支持深色模式。虽然这次更新离WWDC上的演示已经过去了9个月,但…

网站后端_Python+Flask.0007.FLASK构造跳转之301跳转与302重定向?

构造地址:说明: FLASK支持通过视图函数及传参来构造URL,而且未来修改URL可一次性修改,且默认构建会转义特殊字符和Unicode数据,这些工作不需要我们自己处理,且不仅支持在上下文中构造而且还支持在模版文件中构造#!/usr/bin/env python # -*- coding: utf-8 -*- ""&qu…

python插值程序_计算方法(2)——插值法(附Python程序)

给定一些数据,生成函数的方式有两种:插值,回归。插值而得到的函数通过数据点,回归得到的函数不一定通过数据点。下面给出拉格朗日插值,牛顿插值和Hermite插值的程序,具体原理可参考课本,不再赘述…

java中cbrt_Java Math类静态double cbrt(double d)示例

java中cbrt数学类静态double cbrt(double d) (Math Class static double cbrt(double d)) This method is available in java.lang package. 此方法在java.lang包中可用。 This method is used to find the cube root of the given parameter in the method. 此方法用于查找方法…