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.mzph.cn/news/80403.shtml

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

相关文章

C语言编程题（二）运算符与位运算符优先级

C语言编程题（二）运算符与位运算符优先级

#include <stdio.h>int main() { unsigned char a0xa5; unsigned char b~a>>41; printf("b%d",b); return 0;} 错误思路&#xff1a; unsigned char占一个字节&#xff0c;即8bit&#xff0c;将a写入内存中的形式为&#xff1a; 1010 0101 按照常规来…
阅读更多...
Matlab之并行程序设计实战教程

Matlab之并行程序设计实战教程

在本教程中&#xff0c;我们将介绍如何使用Matlab进行并行程序设计。我们将通过一个简单的示例来演示如何将串行代码转换为并行代码&#xff0c;以提高程序的执行效率。 示例&#xff1a;计算一个数组的平方和 假设我们有一个包含10000个元素的数组&#xff0c;我们想计算该数…
阅读更多...
OkHttp 根据服务器返回的的过期时间设置缓存

OkHttp 根据服务器返回的的过期时间设置缓存

据返回的缓存时间来缓存响应&#xff0c;可以通过使用OkHttp的CacheControl和ResponseCacheInterceptor来实现。以下是一个示例代码&#xff1a; // 创建缓存目录和缓存对象 File cacheDirectory new File(context.getCacheDir(), "http-cache"); int cacheSize 1…
阅读更多...
[运维|数据库] 在 PostgreSQL 中使用正则表达式进行模式匹配

[运维|数据库] 在 PostgreSQL 中使用正则表达式进行模式匹配

以下是如何在 PostgreSQL 中使用正则表达式进行模式匹配&#xff1a; SELECT column_name FROM your_table WHERE column_name ~ your_pattern;在上面的查询中&#xff1a; column_name 是您要搜索的列名。 your_table 是包含数据的表名。 ‘your_pattern’ 是您的正则表达式…
阅读更多...
【面试刷题】——堆栈窗口

【面试刷题】——堆栈窗口

“堆栈窗口”&#xff08;Stack Window&#xff09;通常不是一个特定的编程术语&#xff0c;但可以用来描述在编程和计算机科学领域中一些相关的概念。这些概念涉及到堆栈&#xff08;stack&#xff09;和窗口&#xff08;window&#xff09;等术语的组合。以下是一些可能涉及到…
阅读更多...
JVM——3.StringTable字符串常量池

JVM——3.StringTable字符串常量池

这篇文章我们来讲一下StringTable字符串常量池 目录 1.引例 2.StringTable的特性 3.StringTable的位置 4.StringTable的垃圾回收、 5.StringTable性能调优 6.总结 1.引例 首先&#xff0c;我们来看下面的这段程序&#xff0c;请思考最终的输出结果。 输出结果&#xff…
阅读更多...
Multitor：一款带有负载均衡功能的多Tor实例创建工具

Multitor：一款带有负载均衡功能的多Tor实例创建工具

关于Multitor Multitor是一款带有负载均衡功能的多Tor实例创建工具&#xff0c;Multitor的主要目的是以最快的速度完成大量Tor进程的初始化&#xff0c;并将大量实例应用到我们日常使用的程序中&#xff0c;例如Web浏览器和聊天工具等等。除此之外&#xff0c;在该工具的帮助下…
阅读更多...
常用设计模式总结 + 实例

常用设计模式总结 + 实例

工厂模式 工厂函数通常是指一个函数&#xff0c;它用来创建和返回其他函数或对象的实例。 人话&#xff1a; 当new Class 或 Function 时&#xff0c;根据传入的参数&#xff0c;而返回不同的值&#xff0c;这就是工厂模式。 &#xff08;所以可以说&#xff0c;这是我们开…
阅读更多...
vscode如何设置文件折叠

vscode如何设置文件折叠

随着项目的不断迭代开发&#xff0c;复杂度越来越高&#xff0c;配置文件越来越多&#xff0c;导致vscode左侧文件列表展示非常不直观&#xff0c;幸好可以通过文件折叠来简化展示效果&#xff0c;把同类相关的文件折叠在一块展示&#xff0c;方便查看配置文件。配置好后的效果…
阅读更多...
React 开发一个移动端项目(2)

React 开发一个移动端项目(2)

配置基础路由 目标&#xff1a;配置登录页面的路由并显示在页面中 步骤&#xff1a; 安装路由&#xff1a; yarn add react-router-dom5.3.0 5 和 6 两个版本对组件类型的兼容性和函数组件支持有所改变&#xff0c;在这里使用的是 5。 和路由的类型声明文件 yarn add types…
阅读更多...
VTK 基础入门 ( 一 ) 相机设置

VTK 基础入门 ( 一 ) 相机设置

/** 相机 SetClippingRange()/SetFocalPoint() / SetPosition()分别用于设置相机的前后裁剪平面、焦点和位置。 ComputeViewPlaneNormal()方法是根据设置的相机位置、焦点等信息&#xff0c;重新计算视平面 (View Plane)的法向量。 一般该法向量与视平面是垂直…
阅读更多...
基于 kubernetes+docker构建高可用、高性能的 web 、CICD集群

基于 kubernetes+docker构建高可用、高性能的 web 、CICD集群

文章目录 一、项目架构图二 、项目描述三、项目环境四、环境准备1、IP地址规划2、关闭selinux和firewall3、配置静态ip地址4、修改主机名5、升级系统&#xff08;可做可不做&#xff09;6、添加hosts解析 五、项目步骤1、设计整个集群的架构&#xff0c;规划好服务器的IP地址&a…
阅读更多...
Postgresql中检测内存越界或use after free的简便方法

Postgresql中检测内存越界或use after free的简便方法

1 使用场景 在Postgresql的内存管理模块中&#xff0c;最常用的aset.c提供的内存池实现&#xff0c;该实现提供了两个非常实用的开关来解决常见的内存越界问题&#xff1a; memdebug.c * About CLOBBER_FREED_MEMORY:** If this symbol is defined, all freed memory is over…
阅读更多...
AIGC专栏6——通过阿里云与AutoDL快速拉起Stable Diffusion和EasyPhoto

AIGC专栏6——通过阿里云与AutoDL快速拉起Stable Diffusion和EasyPhoto

AIGC专栏6——通过阿里云与AutoDL快速拉起Stable Diffusion和EasyPhoto 学习前言Aliyun DSW快速拉起&#xff08;新用户有三个月免费时间&#xff09;1、拉起DSW2、运行Notebook3、一些小bug AutoDL快速拉起1、拉起AutoDL2、运行Notebook 学习前言 快速拉起AIGC服务 对 用户体…
阅读更多...
Debian 12快速安装图解

Debian 12快速安装图解

文章目录 Debian 12安装图解创建虚拟机安装系统登录并用光盘离线安装sudo、curl解决Linux下sudo更改文件权限报错保存快照debain添加在线源(配置清华源)参考 Debian 12安装图解 Debian选择CD安装非常慢&#xff0c;本次安装选择DVD离线安装。 下载 https://www.debian.org/CD…
阅读更多...
大范围XSS扫描工具：XSS-Freak，BurpSuite随机用户代理，Hades 静态代码审核系统

大范围XSS扫描工具：XSS-Freak，BurpSuite随机用户代理，Hades 静态代码审核系统

大范围XSS扫描工具&#xff1a;XSS-Freak&#xff0c;BurpSuite随机用户代理&#xff0c;Hades 静态代码审核系统。 #################### 免责声明&#xff1a;工具本身并无好坏&#xff0c;希望大家以遵守《网络安全法》相关法律为前提来使用该工具&#xff0c;支持研究学习…
阅读更多...
【AIGC】Stable Diffusion Prompt 每日一练0916

【AIGC】Stable Diffusion Prompt 每日一练0916

一、前言 1.1 写在前面 本文是一个系列&#xff0c;有点类似随笔&#xff0c;每天一次更新&#xff0c;重点就Stable Diffusion Prompt进行专项训练&#xff0c;本文是第022篇《Stable Diffusion Prompt 每日一练0916》。上一篇《Stable Diffusion Prompt 每日一练0915》 1.…
阅读更多...
ES6中新增加的Proxy对象及其使用方式

ES6中新增加的Proxy对象及其使用方式

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ Proxy对象的基本概念Proxy对象的主要陷阱&#xff08;Traps&#xff09; ⭐ 使用Proxy对象⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来…
阅读更多...
开源项目-SeaTunnel-UI数据集成系统

开源项目-SeaTunnel-UI数据集成系统

哈喽，大家好，今天给大家带来一个开源项目-SeaTunnel-UI数据集成系统 系统主要有任务配置，任务实例，数据源，虚拟表，用户管理等功能 登录 数据源 mysql数据源配置参数说明 kafka参数配置 mysqlcdc配置参数说明 虚拟表
阅读更多...
【自学开发之旅】Flask-标准化返回-连接数据库-分表-orm-migrate-增删改查（三）

【自学开发之旅】Flask-标准化返回-连接数据库-分表-orm-migrate-增删改查（三）

业务逻辑不能用http状态码判断&#xff0c;应该有自己的逻辑判断。想要前端需要判断&#xff08;好多if…else&#xff09;&#xff0c;所以需要标准化&#xff0c;标准化返回。 json标准化返回: 最外面&#xff1a;data,message,code三个字段。 data&#xff1a;返回的数据 co…
阅读更多...
最新文章

Copyright @ 2022~2023