有角。为什么调用markForCheck()结果来查看更新

2024-03-24

到处都说 markForCheck 只是将当前组件视图和所有父组件(直到根组件)标记为脏组件。因此,下次 DetectChanges 执行时,它将更新视图。 从这一点上我有两个问题。两者都在该组件具有的上下文中changeDetection: ChangeDetectionStrategy.OnPush

1) 如果“async pipeline”除了调用 markForCheck (源代码 https://github.com/angular/angular/blob/master/packages/common/src/pipes/async_pipe.ts#L143),为什么视图会更新?

2)如果我尝试在某个异步进程中调用markForCheck,视图也会更新。

演示:堆栈闪电战 https://stackblitz.com/edit/angular-9-starter-material-p3eggx

您能帮助我了解这些过程中发生的情况以及视图实际更新的原因吗?我期待有人在 1) 和 2) 之后调用 DetectChanges 方法,但是谁......


在@David 的帮助下我找到了答案。

首先,RxJs 无论如何都没有用区域包装,但本机异步函数是(如setTimer/Iterval, fetch api, XHR, DOM events)。由于 RxJs 定时器/延迟(...) 运算符使用本机异步函数,这导致它们也在区域上下文中进行处理。

这就是我们在 Rx 中时 Callstack 的样子tap操作员

enter image description here You can see that Rx part comes after Angular/Zone one.

Angular轮到他了使用区域呼叫tick()每当执行异步回调时函数。Tick方法从根组件向下查找标记为检查视图。

我在tick函数中放置了断点,它在我们的回调执行后被调用

那么当我们使用第一种情况时会发生什么async pipe在模板上。

  1. 异步回调由异步管道运算符处理,并调用 markForCheck() 函数
  2. 正如我们所知,markForCheck 将当前视图和父视图标记为 RootComponent 进行检查
  3. 步骤 1 的回调完成后,tick()叫做。最后将检查视图并更新它

当我们调用第二种情况时,几乎相同的情况发生markForCheck在 RxJs 运算符内。我们做同样的事情async pipe确实如此,并且因为我们的回调也用区域包装,所以我们在回调完成后执行相同的过程。

如果您不在异步回调中调用markForCheck,而是调用tick函数,则不会进行任何更新。 值得一提的是,如果您调用 detectorChanges(),尽管没有调用 markForCheck 函数,更新也会完成。 这是关于的示例堆栈闪电战 https://stackblitz.com/edit/angular-9-starter-material-boqk4e?file=src/app/app.component.ts这是由于 ChangeDetectorRef 中的 detechChanges 忽略了 markForCheck 标志,并对组件及其所有子组件进行更改检测。 这里面还有很多细节article https://hackernoon.com/everything-you-need-to-know-about-change-detection-in-angular-8006c51d206f

此方法对当前组件视图运行更改检测,无论其状态如何

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

有角。为什么调用markForCheck()结果来查看更新 的相关文章

随机推荐

  • Automapper - 字典到对象映射不起作用?

    我正在尝试将字典转换为对象 我已经尝试过以下方法 但它不起作用 public class FormField public string FieldName get set public string FieldValue get set
  • 服务器端表使用 JS、Php 或 Ajax 从表(但不是数据库)中删除行

    项目链接 https databasetable net 000webhostapp com https databasetable net 000webhostapp com 以下代码正确删除表中的一行 example on click
  • LoadInst 和 StoreInst 值和地址 LLVM

    我有一个文件 print c 它有两个功能 void printLoad print address and value of memory location from which value printf address value vo
  • Java - SpringMVC - 获取控制器中的参数

    我在将对象保存到数据库中时遇到问题 我有一个与配置文件具有多对一关系的用户 我的 JSP 刚刚添加了一个新用户 因此 JSP 包含字段和具有所需配置文件的组合框 问题是 当我运行程序时 即使我在组合框中选择了一个配置文件 属性 user p
  • Flutter:google_sign_in 插件 MissingPluginException

    我试图让谷歌登录插件正常工作 但没有成功 我已将其放入我的 pubspec yaml 并运行 flutter packages get 但仍然没有运气 抛出以下异常 E flutter 3313 ERROR lib tonic loggin
  • “有一个”和“是一个”是什么意思? [复制]

    这个问题在这里已经有答案了 谁能解释一下两个类之间的 HAS A 和 IS A 是什么意思 举个例子会有帮助 汽车是 车辆 汽车有一个方向盘 Eg class SteeringWheel class Vehicle virtual void
  • 集合中项目的总和

    使用 LINQ to SQL 我有一个包含 OrderDetails 集合的 Order 类 订单详细信息有一个名为 LineTotal 的属性 它获取 Qnty x ItemPrice 我知道如何对数据库进行新的 LINQ 查询来查找订单
  • iOS 内部分发由外部供应商开发的应用程序

    第三方开发了一款供我们企业环境中私人使用的应用程序 现在是时候分发它了 但他们不想向我们发送他们的代码 我感觉这会导致问题 因为分发配置文件和证书必须发送给他们 从而损害我们的私钥 这是我们不允许的 这是正确的吗 或者可以在不泄露我们的私钥
  • 如何从 PowerShell 模块导出变量

    我在a中定义了一个变量psm1文件 但是当我尝试在另一个脚本中访问它时 导入模块后 我没有看到在psm1 file 全局变量 psm1 blah hello world 我的脚本 ps1 Import Module PSScriptRoot
  • Phaser3 场景过渡

    我是新来的Phaser3在开始一个疯狂的项目之前 我想知道我应该如何开始 在场景之间切换 我看到有几个函数 启动 启动 切换 运行 恢复 暂停等 例如 假设我想要 2 个场景 一个菜单和一个游戏 我在菜单上启动 我想进入游戏场景 如果我单击
  • MongoDB 中“id”和“_id”字段的区别

    使用 MongoDB 文档中的字段 ID 或 ID 有什么区别吗 我问这个 因为我通常使用 id 但是我在文档中看到了这种排序 id 1 http www mongodb org display DOCS Optimizing Object
  • 高效的按位运算,用于计数位或查找最右|最左的位

    给定一个 unsigned int 我必须执行以下操作 计算设置为 1 的位数 找到最左边1位的索引 找到最右边1位的索引 操作不应依赖于体系结构 我已经使用按位移位完成了此操作 但我必须迭代几乎所有位 es 32 例如 计算 1 unsi
  • 窗口背景图像的模糊效果

    我有一个以图像为背景的窗口 在那个窗口上我还有按钮和其他控件 这是我对该窗口的风格
  • Angular:使用指令禁用材质按钮不起作用

    我想通过指令禁用一些按钮 向按钮添加禁用属性 该指令适用于经典 html 按钮 但不适用于角形材质设计按钮 mat button https material angular io components button overview im
  • float64 到 float32 的转换给出了意外的结果

    当我转换一个float64数到一个float32我得到一个奇怪的结果 In 22 np float32 20140131 0 Out 22 20140132 0 为什么会发生这种情况 20140131 0 无法表示为 32 位整数 32位浮
  • 如何为 Azure 虚拟机生成磁盘不足警报

    我有一个虚拟机 用作构建服务器 该虚拟机的磁盘经常堆积 并且正在努力解决该问题 同时我正在寻找设置在磁盘空间变高时触发警报的选项 我检查了监控下的可用指标 但只能找到 磁盘写入字节 和 磁盘读取字节 这对我没有帮助 我需要帮助设置发送到我的
  • 通过R中的卷积添加两个随机变量

    我想计算 R 中两个概率分布的卷积 我需要一些帮助 为了简单起见 假设我有一个变量 x 它呈正态分布 平均值 1 0 stdev 0 5 变量 y 呈对数正态分布 平均值 1 5 stdev 0 75 我想确定 z x y 据我所知 z 的
  • .prop() 与 .data()

    随着新版本的发布jQuery v1 6 http api jquery com category version 1 6 并添加了 prop method 使用上是否存在本质区别 prop over data 我在文档中看到 在 IE9 之
  • Spring MVC:发布请求和带有数组的 json 对象:错误的请求

    我正在尝试使用 Spring MVC 从 http POST 请求中检索参数 该请求包含以下 json 对象 内容类型 application json 该对象本身包含一个 customObjects 数组 globalId 338 lin
  • 有角。为什么调用markForCheck()结果来查看更新

    到处都说 markForCheck 只是将当前组件视图和所有父组件 直到根组件 标记为脏组件 因此 下次 DetectChanges 执行时 它将更新视图 从这一点上我有两个问题 两者都在该组件具有的上下文中changeDetection