网站

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. Tomcat8升级后URL中特殊字符报错出现原因

    请求带上花括号等字符,请求无法送达服务端,报错: Failed to load resource: the server responded with a status of 400 () https ...

  2. Mybatis---03Mybatis配置文件浅析(一)

    一.写入mybatis配置文件的约束 <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE co ...

  3. vue项目优化与上线

    一.项目优化策略 1.生成打包报告 2.第三方库启用CDN 3.Element-ui组件按需加载 4.首页内容定制 5.路由懒加载 1.生成打包报告 1.1通过vue-cli的UI面板直接查看 1.2 ...

  4. django支持多语言

    Django支持多语言切换 下面介绍下如何使网站或APP国际化,让其支持多种语言 . 官网 效果 1.创建locale文件夹 先在项目根目录下创建一个名为locale的文件夹,这个文件夹是用来存放dj ...

  5. 初步配置基于Struts的maven的Web项目demo

    1.创建mavenweb项目 eclipse | Idea 中创建maven项目,具体步骤PASS. 2.导入Struts2核心架包 Idea中在maven项目上,选择ADD FRAMEWORK ec ...

  6. 我的第二次C语言作业

    这个作业属于哪个课程 https://edu.cnblogs.com/campus/zswxy/SE2020-2/homework/11422 这个作业要求在哪里 https://www.cnblog ...

  7. 论文解读 - Relational Pooling for Graph Representations

    1 简介 本文着眼于对Weisfeiler-Lehman算法(WL Test)和WL-GNN模型的分析,针对于WL测试以及WL-GNN所不能解决的环形跳跃连接图(circulant skip link ...

  8. SU+GIS,让SketchUp模型在地图上活起来

    一.SU+GIS的场景展示 skp与卫星地图和倾斜摄影模型相结合人工模型与实景模型完美融合 这么一看是不是直接秒杀了单纯看看skp后联想的规划效果? 二.如何快速把草图大师的结果和GIS结合呢?在图新 ...

  9. Linux下git push、git pull等指令需要输入账号密码 - 免除设置

    打开终端按顺序执行下面的指令: 1.cd ~ 2.touch .git-credentials 3.vim .git-credentials 然后在打开的文件里面输入 https://{usernam ...

  10. 最长回文子串的Manacher算法

    对于一个比较长的字符串,O(n^2)的时间复杂度是难以接受的.Can we do better? 先来看看解法2存在的缺陷. 1) 由于回文串长度的奇偶性造成了不同性质的对称轴位置,解法2要对两种情况 ...