Angular中的ngOnchange()的汇总

ngOnChanges() 是 Angular 中的一个生命周期钩子函数，它在组件或指令的 输入属性（@Input()）发生变化时被调用。这个钩子可以帮助你检测输入数据的变化，并对数据变化做出反应。

1.监听的对象

  ngOnChanges() 监听的是 通过 @Input() 装饰器传递给子组件的属性。换句话说，任何标记为 @Input() 的属性都会被 ngOnChanges() 监听。具体来说，它会监听通过父组件传递给子组件的属性变化。

2.触发时机

  ngOnChanges() 会在 输入属性的值变化时被调用，且每次变化都会传递给钩子一个 SimpleChanges 对象，其中包含了该输入属性的前后值。

  • 第一次调用：在组件初始化时，如果有输入属性，ngOnChanges() 会在组件的构造函数和 ngOnInit() 之前被调用。
  • 后续调用：每次输入属性的值发生变化时，ngOnChanges() 会被再次调用。

3.参数：SimpleChanges

   ngOnChanges() 的参数是一个 SimpleChanges 对象，它是一个字典对象，包含了所有发生变化的输入属性。每个输入属性的变化信息是一个 SimpleChange 对象，它包含以下属性：

  • previousValue：变化前的值。
  • currentValue：变化后的值。
  • firstChange：一个布尔值，表示该输入属性是否是第一次变化。
  • 示例: 
    ngOnChanges(changes: SimpleChanges): void {if (changes['inputProp']) {const previousValue = changes['inputProp'].previousValue;const currentValue = changes['inputProp'].currentValue;const isFirstChange = changes['inputProp'].firstChange;console.log(`inputProp changed from ${previousValue} to ${currentValue}`);console.log(`Is this the first change? ${isFirstChange}`);}
}

4.语法

ngOnChanges(changes: SimpleChanges): void {// 处理属性变化
}

5.示例代码

       假设有一个父组件 ParentComponent 和一个子组件 ChildComponent，父组件向子组件传递输入属性。

父组件：
@Component({selector: 'app-parent',template: `<app-child [inputProp]="parentData"></app-child><button (click)="changeData()">Change Data</button>`
})
export class ParentComponent {parentData = 'Hello';changeData() {this.parentData = 'Hello, Angular!';}
}
子组件：
@Component({selector: 'app-child',template: `<p>{{ inputProp }}</p>`
})
export class ChildComponent implements OnChanges {@Input() inputProp: string;ngOnChanges(changes: SimpleChanges) {if (changes['inputProp']) {const previousValue = changes['inputProp'].previousValue;const currentValue = changes['inputProp'].currentValue;const firstChange = changes['inputProp'].firstChange;console.log(`inputProp changed from ${previousValue} to ${currentValue}`);console.log(`Is this the first change? ${firstChange}`);}}
}

6.解析：

  • 当 ParentComponent 中的 parentData 发生变化时，ChildComponent 中的 inputProp 将触发 ngOnChanges() 钩子。
  • SimpleChanges 对象中将包含 inputProp 属性的变化信息，其中包括前一个值、当前值和是否为首次变化的信息。

7.使用场景

  • 响应输入变化：当需要在输入数据发生变化时做一些额外处理，例如重新计算、重新加载数据等。
  • 优化性能：可以在数据变化时执行优化操作，例如避免不必要的 API 调用。
  • 数据监控：在多个输入属性同时变化时，使用 ngOnChanges() 可以监控不同输入的变化并做出响应。

8.注意事项

  • ngOnChanges() 会在每次输入属性变化时被调用，因此如果输入属性频繁变化，ngOnChanges() 也会频繁触发，可能影响性能。
  • 如果组件的输入属性没有变化，ngOnChanges() 不会被触发。
  • ngOnChanges() 仅在 @Input() 属性变化时触发，不会监控其他类型的变化（例如，组件内部的局部状态变化）。

总结：

   ngOnChanges() 监听的是组件的 输入属性（@Input()），每当父组件传递给子组件的输入属性发生变化时，ngOnChanges() 会被触发并接收一个 SimpleChanges 对象，包含所有变化的输入属性的详细信息。

  • 监听对象：@Input() 属性。
  • 变化内容：父组件传递给子组件的数据变化。

附加说明：为什么有个时候可以接收到 currentValue 和 previousValue 都是 undefined 的情况？这种情况不是应该没有变化嘛？为什么可以检测到？

        在 Angular 中，如果你在 ngOnChanges() 中看到 currentValue 和 previousValue 都是 undefined，这可能是由于一些特定的场景或代码逻辑导致的。下面是可能的分析：

1. 组件初始化时的行为

ngOnChanges() 会在 组件初始化时触发一次，特别是在组件的输入属性第一次被设置时。

  • 首次输入时，Angular 会触发一次 ngOnChanges()，即使没有任何显式的变化。
  • 在这个第一次触发时，previousValue 和 currentValue 可能会是 undefined，因为此时 Angular 并没有从父组件传递任何值到子组件，或者在组件构造函数中初始化时，输入属性还没有赋值。

举个例子：

@Component({selector: 'app-child',template: `<p>{{ inputProp }}</p>`
})
export class ChildComponent implements OnChanges {@Input() inputProp: string;ngOnChanges(changes: SimpleChanges) {// 如果 inputProp 是第一次变化，可能会看到 undefinedconsole.log(changes['inputProp']);}
}

父组件：

@Component({selector: 'app-parent',template: `<app-child [inputProp]="parentData"></app-child>`
})
export class ParentComponent {parentData = 'Initial value';
}

执行过程：

  1. 在 ChildComponent 第一次加载时，ngOnChanges() 会被触发。此时 inputProp 可能是 undefined，因为它是第一次接收到父组件的数据。
  2. ngOnChanges() 会触发一次，即使父组件的值是首次设置，也会传递 SimpleChanges 对象，inputProp 的 previousValue 和 currentValue 可能都是 undefined，因为 Angular 是在首次赋值时检查的。
  3. firstChange 会是 true，表示这是第一次赋值。
2. 父组件传递的数据为 undefined

        如果父组件传递给子组件的 @Input() 属性值是 undefined，并且这个值发生了变化，ngOnChanges() 也会触发。在这种情况下，如果传递的数据本身就是 undefined，那么 previousValue 和 currentValue 可能都为 undefined。

例如：

@Component({selector: 'app-parent',template: `<app-child [inputProp]="parentData"></app-child>`
})
export class ParentComponent {parentData = undefined; // 或者 null
}

        如果父组件的 inputProp 值初始化为 undefined，当子组件的 ngOnChanges() 被调用时，changes['inputProp'] 中的 previousValue 和 currentValue 可能都是 undefined，因为 inputProp 被初始化为 undefined，并且没有显式的初值。

3. 异步数据变化

        如果输入属性的值是通过异步操作（比如从 API 获取数据）赋值的，ngOnChanges() 可能会在组件初始化时被触发，但值还没有更新。

  • 在这种情况下，ngOnChanges() 会先被调用一次，此时输入属性的值可能还没有赋值或者为 undefined。
  • 当异步数据到达并更新输入属性时，ngOnChanges() 会再次被调用，且这时 SimpleChanges 会包含有效的值。
4. 组件初始化与 ngOnChanges() 的触发时机

        Angular 在组件初始化时会触发 ngOnChanges()，即使输入属性的初始值是 undefined 或者 null，也会触发一次钩子函数。这时：

  • previousValue 可能是 undefined，因为组件初始化时没有值。
  • currentValue 可能也是 undefined，因为输入属性的初值可能是 undefined 或 null。
总结

        当你看到 ngOnChanges() 中的 currentValue 和 previousValue 都是 undefined 时，通常是以下几种情况之一：

  1. 组件初始化时：当组件第一次被创建并接收到 @Input() 数据时，Angular 会触发 ngOnChanges()，即使没有显式的变化，也会将 previousValue 和 currentValue 都设为 undefined，尤其当输入属性还没有被赋值时。
  2. 父组件的输入值是 undefined：如果父组件传递的 @Input() 值本身是 undefined，那么 currentValue 和 previousValue 也会是 undefined。
  3. 异步赋值：如果输入属性的值是通过异步操作（如 HTTP 请求）传递的，可能会在初始化时出现 undefined，而在值更新后触发另一次 ngOnChanges()。
再次强调：

        ngOnChanges()不是仅在值变化时触发，而是在每次输入属性的值发生变化时都会被触发，包括从undefined到undefined（即初始绑定时）。换句话说，ngOnChanges()会在 输入属性的生命周期开始时触发，即使它的值没有变化，也会触发一次钩子函数。

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

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

相关文章

百度智能云千帆大模型平台引领企业创新增长

百度智能云千帆大模型平台引领企业创新增长

本文整理自百度世界大会 2024——「智能跃迁 产业加速」论坛的同名演讲。 更多大会演讲内容&#xff0c;请访问&#xff1a; https://baiduworld.baidu.com 首先&#xff0c;跟大家分享一张图&#xff0c;这个是我们目前大模型应用落地的场景分布。可以看到&#xff0c;大模型…
阅读更多...
记录java Collections.sort踩的坑

记录java Collections.sort踩的坑

前言 java Collections.sort 排序失效&#xff1f;为什么会排序失效呢&#xff1f; 需求和问题 需求&#xff1a;获取指定文件夹下的所有文件&#xff0c;并且按照修改时间顺序从大到小排序&#xff0c;如果修改时间相同&#xff0c;则按照创建时间从大到小排序 // 输入lis…
阅读更多...
【企业级分布式系统】ELK优化

【企业级分布式系统】ELK优化

文章目录 Elasticsearch作为日志存储时的优化优化ES索引设置优化线程池配置锁定内存&#xff0c;不让JVM使用Swap减少分片数、副本数 Elasticsearch作为日志存储时的优化 linux内核优化、JVM优化、ES配置优化、架构优化&#xff08;filebeat/fluentd代替logstash、加入kafka做…
阅读更多...
【Flutter 问题系列第 84 篇】如何清除指定网络图片的缓存

【Flutter 问题系列第 84 篇】如何清除指定网络图片的缓存

这是【Flutter 问题系列第 84 篇】&#xff0c;如果觉得有用的话&#xff0c;欢迎关注专栏。 博文当前所用 Flutter SDK&#xff1a;3.24.3、Dart SDK&#xff1a;3.5.3&#xff0c;网络图片缓存用的插件 cached_network_image: 3.4.1&#xff0c;缓存的网络图像的存储和检索用…
阅读更多...
亚马逊商品详情API接口解析，Json数据示例返回

亚马逊商品详情API接口解析，Json数据示例返回

亚马逊的商品详情API接口&#xff08;如Amazon Product Advertising API&#xff09;允许开发者获取商品的详细信息&#xff0c;包括价格、描述、图片URL等。以下是一个示例的JSON数据返回结构&#xff0c;以及相应的解析说明。请注意&#xff0c;实际返回的数据结构可能会根据…
阅读更多...
SIMCom芯讯通A7680C在线升级:FTP升级成功；http升级腾讯云对象储存的文件失败；http升级私有服务器的文件成功

SIMCom芯讯通A7680C在线升级:FTP升级成功；http升级腾讯云对象储存的文件失败；http升级私有服务器的文件成功

从事嵌入式单片机的工作算是符合我个人兴趣爱好的,当面对一个新的芯片我即想把芯片尽快搞懂完成项目赚钱,也想着能够把自己遇到的坑和注意事项记录下来,即方便自己后面查阅也可以分享给大家,这是一种冲动,但是这个或许并不是原厂希望的,尽管这样有可能会牺牲一些时间也有哪天原…
阅读更多...
uniapp实现中英文切换

uniapp实现中英文切换

home.js const data {ZH: {content1: "苹果",},EN: {content1: “Apple”,} } export default dataindex.js import home from "./home.js" export default {home }en.js import part1 from ./data/part1/index.js const en {language: {name: "…
阅读更多...
Android Studio 控制台输出的中文显示乱码

Android Studio 控制台输出的中文显示乱码

1. Android Studio 控制台输出的中文显示乱码 1.1. 问题 安卓在调试阶段&#xff0c;需要查看app运行时的输出信息、出错提示信息。乱码&#xff0c;会极大的阻碍开发者前进的信心&#xff0c;不能及时的根据提示信息定位问题&#xff0c;因此我们需要查看没有乱码的打印信息。…
阅读更多...
活着就好20241120

活着就好20241120

今天是20号&#xff0c;周三&#xff0c;亲爱的朋友们&#xff0c;大家早上好&#xff01;在连续两天的努力之后&#xff0c;我们迎来了这个同样充满希望与挑战的周三早晨。让我们带着前两天的收获与经验&#xff0c;怀揣着新的目标和梦想&#xff0c;继续在这丰富多彩的一天中…
阅读更多...
基于yolov8、yolov5的行人检测识别系统（含UI界面、训练好的模型、Python代码、数据集）

基于yolov8、yolov5的行人检测识别系统（含UI界面、训练好的模型、Python代码、数据集）

摘要&#xff1a;行人检测在交通管理、智能监控和公共安全中起着至关重要的作用&#xff0c;不仅能帮助相关部门实时监控人群动态&#xff0c;还为自动化监控系统提供了可靠的数据支撑。本文介绍了一款基于YOLOv8、YOLOv5等深度学习框架的行人检测模型&#xff0c;该模型使用了…
阅读更多...
Java安全—log4j日志FastJson序列化JNDI注入

Java安全—log4j日志FastJson序列化JNDI注入

前言 log4j和fastjson都是这几年比较火的组件&#xff0c;前者是用于日志输出后者则是用于数据转换&#xff0c;今天我们从源码来说一下这两个组件为何会造成漏洞。 实验环境 这里的idea要进行一下配置&#xff0c;因为我们要引用第三方组件&#xff0c;而这些第三方组件都是…
阅读更多...
【白话机器学习系列】白话 Softmax

【白话机器学习系列】白话 Softmax

文章目录 什么是 SoftmaxSoftmax 函数详解示例编程实现对矩阵应用 Softmax 函数 什么是 Softmax Softmax 函数&#xff0c;又称归一化指数函数&#xff0c;它使用指数函数将输入向量归一化为概率分布&#xff08;每一个元素的范围都在 ( 0 , 1 ) (0,1) (0,1) 之间&#xff0c;…
阅读更多...
golang通用后台管理系统10(退出登录，注销token)

golang通用后台管理系统10(退出登录，注销token)

1.实现思路&#xff1a;将登录用户的token加入黑名单 2. //1.2 用户退出 exploreRouter.POST("/logout", sysCtrl.Logout) 3.loginController.go //用户退出 func Logout(c *gin.Context) {logger : commonLog.InitLogger()sysUser : service.GetProfile1(c)fmt.…
阅读更多...
uniapp 页面跳转及页面返回传值

uniapp 页面跳转及页面返回传值

跳转传值&#xff1a; 传值页面A const data {name:0Math.random() * 100}; // 跳转页面方法 uni.navigateTo({//url: /pages/patrol/patrol?dataencodeURIComponent(JSON.stringify(data)),// 有值url: /pages/patrol/patrol?dataencodeURIComponent(JSON.stringify(null)…
阅读更多...
C++系列之继承

C++系列之继承

&#x1f497; &#x1f497; 博客:小怡同学 &#x1f497; &#x1f497; 个人简介:编程小萌新 &#x1f497; &#x1f497; 如果博客对大家有用的话&#xff0c;请点赞关注再收藏 &#x1f31e; 继承的概念 继承机制是面向对象程序设计使代码可以复用的最重要的手段&#xf…
阅读更多...
Swift从0开始学习 对象和类 day3

Swift从0开始学习 对象和类 day3

类&#xff08;Class&#xff09; 是一种类型或模板&#xff0c;描述了对象的特征和行为。对象&#xff08;Object&#xff09; 是类的实例&#xff0c;实际的实体&#xff0c;拥有自己的数据。 新入门的教学都喜欢用“人”来举例为类&#xff0c;在这里我也用“人”吧 //&…
阅读更多...
【算法设计与分析实训】第1关：求序列的最大字段和

【算法设计与分析实训】第1关：求序列的最大字段和

务描述 本关任务&#xff1a;编写用动态规划解决最大字段和问题。 相关知识 为了完成本关任务&#xff0c;你需要掌握&#xff1a;动态规划。 编程要求 给定由n个整数&#xff08;可能为负数&#xff09;组成的序列&#xff1a;a1,a2,……,an, 求该序列的最大子段和。当所有整…
阅读更多...
Android开发实战班 - 第一部分：Android开发基础

Android开发实战班 - 第一部分：Android开发基础

本课程旨在帮助学员系统掌握Android开发的基础知识与技能&#xff0c;为后续深入学习与实战开发打下坚实基础。本部分课程将涵盖开发环境搭建、Kotlin语言基础、Android项目结构、Gradle构建系统、Activity生命周期以及UI布局基础等内容。内容比较基础&#xff0c;就系统的幸的…
阅读更多...
高防服务器实现防御的方式，高防服务器的优势

高防服务器实现防御的方式，高防服务器的优势

高防服务器通过多种防御机制来实现对网络攻击的防护&#xff0c;确保服务器的稳定性和数据的安全性。 高防服务器实现防御的方式 - 硬件配置&#xff1a;高防服务器通常配备高性能的硬件&#xff0c;包括专业的硬件防火墙&#xff0c;以应对大流量攻击。 - 带宽资源&#xff1a…
阅读更多...
一、Nginx反向代理（七层代理）二、Nginx的TCP/UDP调度器（四层代理）

一、Nginx反向代理（七层代理）二、Nginx的TCP/UDP调度器（四层代理）

一、Nginx反向代理&#xff08;七层代理&#xff09; 实验要求 使用Nginx实现Web反向代理功能&#xff0c;实现如下功能&#xff1a; 后端Web服务器两台&#xff0c;可以使用httpd实现Nginx采用轮询的方式调用后端Web服务器两台Web服务器的权重要求设置为不同的值最大失败次数为…
阅读更多...
最新文章

Copyright @ 2022~2023