网站

https://blog.thoughtram.io/
https://juristr.com/
https://www.concretepage.com/angular/
https://www.youtube.com/c/MundoAtrevido4U/videos
https://www.concretepage.com/angular/
https://blog.mgechev.com/
https://lifewood.hatenablog.com/
#Frontend

原理图

直接生成模块和路由然后定义声明的模块

ng g m  one --routing --m=app

组件+模块+路由+指向的声明路径

ng g m two --route=home  --m=app

生命周期 DoCheck 和 onChanges 的区别

当我们传入数组或者对象的时候,我们会发现子组件的onChanges 检测不到变化

这时候我们可以用DoCheck 来监控变化了

父组件,当点击的时候给父组件

export class TwoComponent implements OnInit {
public arr: Array<any> = ['a', 'b', 'c']
obj: object = {
name: 'xxx',
age: 'bbb'
}; constructor() {
} ngOnInit(): void {
} public i: number = 0; clickMethod(): void {
this.arr.push(this.arr.length)
this.obj[this.i++] = this.i;
}
}
<button (click)="clickMethod()">++</button>
<app-user [sex]="arr" [videos]="obj"></app-user>

子组件

只要运行更改检测,就会调用 ngDoCheck()

export class UserComponent implements OnInit,OnChanges,DoCheck {
@Input('sex') sex;
@Input('videos') videos;
// 可以解构拿到需要修改的属性
ngOnChanges({sex,videos}: SimpleChanges) {
console.log(sex);
console.log(videos);
}
ngDoCheck() {
console.log(this.videos);
}
}

我们会发现ngOnChanges子组件除了第一次传递的时候能监控到变化,当修改的时候监控不到

但是我们会发现ngDoCheck 在修改的时候能监控到对象的变化

ngOnChanges 用于 基本数据类型

ngDoCheck 用于引用数据类型

KeyValueDiffers

KeyValueDiffers是不同地图差异策略的存储库。角内部使用它的指令NgClassNgStyle等等。无论何时,只要结合这些指令值的变化,这些变化体现。为了处理和更新更改,Angular使用KeyValueDiffers

1. KeyValueDiffers可以使用构造函数注入到组件中。

constructor(private kvDiffers: KeyValueDiffers) {}

2. KeyValueDiffers提供find方法。

    find(kv: any): KeyValueDifferFactory;

kv:传递需要检测以进行更改的对象。

find方法返回KeyValueDifferFactory

3. KeyValueDifferFactory提供工厂KeyValueDiffer。要获取KeyValueDiffer实例,请KeyValueDifferFactory提供create方法。

    create<K, V>(): KeyValueDiffer<K, V>;

4. KeyValueDiffer与众不同之处是跟踪对象随时间的变化。它具有一种diff计算先前状态和新对象状态之间的差异的方法。

    diff(object: Map<K, V>): KeyValueChanges<K, V> | null;

5. KeyValueChanges自上次diff调用该方法以来,将更改保留在映射中。KeyValueChanges有以下方法。

forEachItem:遍历所有更改。

forEachPreviousItem:迭代已更改的先前项目。

forEachChangedItem:迭代其值已更改的那些项。

forEachAddedItem:遍历所有添加的项目。

forEachRemovedItem:遍历所有已删除的项目。

上述所有KeyValueChanges提供KeyValueChangeRecord项目的方法都是迭代的。

6. KeyValueChangeRecord是表示项目更改信息的记录。KeyValueChangeRecord具有诸如currentValuepreviousValue。要获取当前值,我们将其称为currentValue属性,并获取先前值,我们将其称为previousValue属性。找到代码段。

    readonly key: K;
readonly currentValue: V | null;
readonly previousValue: V | null;

完整的例子

export class UserComponent implements OnInit, OnChanges, DoCheck {
@Input('sex') sex;
@Input('videos') videos;
public differs // 可以解构拿到需要修改的属性,一般用于基本数据类型
ngOnChanges({sex, videos}: SimpleChanges) {
// console.log(sex);
// console.log(videos);
}
ngDoCheck() {
let mpArray = this.differs.diff(this.sex)
if (mpArray) {
// 变化检测
mpArray.forEachAddedItem(record => {
console.log('增加', record);
})
mpArray.forEachChangedItem(record => {
console.log('更改', record);
})
mpArray.forEachRemovedItem(record => {
console.log('删除', record);
})
/*有变动的时候,显示原始所有值*/
mpArray.forEachPreviousItem(record => {
// console.log('之前的',record);
})
/*遍历所有*/
mpArray.forEachItem(record => {
// console.log(record);
})
}
} constructor(private kvDiffers: KeyValueDiffers) {
} ngOnInit(): void {
if (this.sex) {
this.differs = this.kvDiffers.find(this.sex).create()
}
} }

IterableDiffer

跟踪随时间变化为可迭代的策略。用于通过NgForOf影响DOM中的等效更改来响应可迭代的更改

在查看IterableDiffer 源码的时候我们会发现很多部分跟KeyValueDiffers 有重叠性,

内部NgForOf使用了生命周期挂钩ngOnChangesngDoCheckngOnChanges该指令用于使用集合find实例的方法根据当前集合的类型选择一个差异IterableDiffersngDoCheck用于将差值应用于集合的当前值。在不同的是要收集与以前的值进行比较,并返回更改列表

有趣的是,差异如何比较集合中的各个值。特别是,它使用值的哪些属性来区分它们。为此,我们需要看一下TrackByFunction界面

代码

export interface TrackByFunction<T> {
(index: number, item: T): any;
}

demo

<div *ngFor="let item of sex;trackBy:indexFn" >{{item}}</div>

sex=['a','b','c']
indexFn(index,item){
console.log(index,item);
return index
} 0 "a"
1 "b"
2 "c"

不同点

iterableDiffer 比较项目序列

KeyValueDiffer 比较字典

angular11源码探索[DoCheck 生命周期和onChanges区别]的更多相关文章

  1. Vue2.0源码阅读笔记--生命周期

    一.Vue2.0的生命周期 Vue2.0的整个生命周期有八个:分别是 1.beforeCreate,2.created,3.beforeMount,4.mounted,5.beforeUpdate,6 ...

  2. Laravel源码分析--Laravel生命周期详解

    一.XDEBUG调试 这里我们需要用到php的 xdebug 拓展,所以需要小伙伴们自己去装一下,因为我这里用的是docker,所以就简单介绍下在docker中使用xdebug的注意点. 1.在php ...

  3. Spring源码系列 — Bean生命周期

    前言 上篇文章中介绍了Spring容器的扩展点,这个是在Bean的创建过程之前执行的逻辑.承接扩展点之后,就是Spring容器的另一个核心:Bean的生命周期过程.这个生命周期过程大致经历了一下的几个 ...

  4. 深入源码理解SpringBean生命周期

    概述 本文描述下Spring的实例化.初始化.销毁,整个SpringBean生命周期,聊一聊BeanPostProcessor的回调时机.Aware方法的回调时机.初始化方法的回调及其顺序.销毁方法的 ...

  5. Spring源码 21 Bean生命周期

    参考源 https://www.bilibili.com/video/BV1tR4y1F75R?spm_id_from=333.337.search-card.all.click https://ww ...

  6. 【源码】spring生命周期

    一.spring生命周期 1. 实例化Bean 对于BeanFactory容器,当客户向容器请求一个尚未初始化的bean时,或初始化bean的时候需要注入另一个尚未初始化的依赖时,容器就会调用crea ...

  7. Spring源码之Bean生命周期

    https://www.jianshu.com/p/1dec08d290c1 https://www.cnblogs.com/zrtqsk/p/3735273.html 总结 将class文件加载成B ...

  8. tomcat源码阅读之生命周期(LifeCycle)

    一.事件机制流程: 1.     当外部事件源发生事件(比如点击了按钮,数据发生改变更新等)时,事件源将事件封装成事件对象Event: 2.     将事件对象交由对应的事件派发器Dispatcher ...

  9. Eureka源码探索(一)-客户端服务端的启动和负载均衡

    1. Eureka源码探索(一)-客户端服务端的启动和负载均衡 1.1. 服务端 1.1.1. 找起始点 目前唯一知道的,就是启动Eureka服务需要添加注解@EnableEurekaServer,但 ...

随机推荐

  1. 浅谈SRT和NDI®在广电制作领域的技术优势和应用

    随着技术的不断发展,用户对音视频质量的要求不断提升,对视频内容观看的方式也日趋多元化.摄像设备的分辨率从高清到4K,甚至有些厂家推出了6K或8K的产品:用户不再局限于从有线电视的直播节目中收看内容,智 ...

  2. ViewModel和LiveData问题思考与解答

    嗨,大家好,面试真题系列又来了,今天我们说说MVVM架构里的两大组件:ViewModel和LiveData. 还是老样子,提出问题,做出解答. ViewModel 是什么? ViewModel 为什么 ...

  3. SpringBoot第五集:整合监听器/过滤器和拦截器(2020最新最易懂)

    SpringBoot第五集:整合监听器/过滤器和拦截器(2020最新最易懂) 在实际开发过程中,经常会碰见一些比如系统启动初始化信息.统计在线人数.在线用户数.过滤敏/高词汇.访问权限控制(URL级别 ...

  4. import tensorflow 出现非法指令(核心已转储)

    使用 conda install -c conda-forge tensorflow 或者 conda install -c conda-forge tensorflow-gpu 试下.

  5. 【QT】QThread源码浅析

    本章会挑出QThread源码中部分重点代码来说明QThread启动到结束的过程是怎么调度的.其次因为到了Qt4.4版本,Qt的多线程就有所变化,所以本章会以Qt4.0.1和Qt5.6.2版本的源码来进 ...

  6. Qt混合Python开发技术:Python介绍、混合过程和Demo

    前言   Qt中混合Python开发,可调用Python命令与脚本.   Python   Python是一种跨平台的计算机程序设计语言. 是一个高层次的结合了解释性.编译性.互动性和面向对象的脚本语 ...

  7. Git撤销文件修改

    在旧版本中,git的撤销工作区的文件修改是用git checkout -- <file>命令,由于容易漏了--导致和切换分支混肴,所以新版本中: - 使用git restore (--wo ...

  8. P6773 [NOI2020]命运

    整体DP 很明显计算答案需要用容斥计算,如果暴力容斥的话,就是枚举哪些路径不符合条件,在这些路径的并集中的边都不能取,其他边任意取,设当前取了$i$条路径,那么对答案的贡献是$(-1)^i2^{n-1 ...

  9. linux下的终端利器----tmux

    转:tmux 是指通过一个终端登录远程主机并运行后,在其中可以开启多个控制台的终端复用软件.类似GNU Screen,但来自于OpenBSD,采用BSD授权.使用它最直观的好处就是,通过一个终端登录远 ...

  10. 5.1 ICommand

    1. CanExecute实现 只是将命令绑定到特定控件是不会触发CanExecute方法执行,该方法只是在实例化命令的时候才使用,其余如果需要触发该事件,只能通过后台代码组合触发,如更新一个后台类字 ...