angular的变更机制是什么

本篇内容主要讲解“angular的变更机制是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“angular的变更机制是什么”吧!

angular的变更机制是什么  angular 第1张

一、什么是变更检测

  • 概括: 一种更改检测机制,用于遍历组件树,检查每个组件的变化,并在组件属性发生变化的时候触发DOM的更新。

  • 变更检测的基本任务: 获得程序的内部状态并使之在用户界面可见。这个状态可以是任何的对象、数组、基本数据类型。

二、什么引起了变更

事件驱动,来源有以下三大类:

  • 事件:页面 click、submit、mouse down……

  • XHR:从后端服务器拿到数据

  • Timers:setTimeout()、setInterval()

这几点有一个共同点,就是它们都是异步的,也就是说,所有的异步操作是可能导致数据变化的根源因素,所以每当执行一些异步操作时,我们的应用程序状态可能发生改变,而这时则需要去更新视图

三、状态变化怎么通知变更检测

Angular当中则接入了NgZone,由它来监听Angular所有的异步事件,Angular 在启动时会重写(通过 Zone.js)部分底层浏览器 API(暴力的拦截了所有的异步事件)。

常见的有两种方式来触发变化检测,一种方法是基于组件的生命周期钩子

ngAfterViewChecked() {
    console.log('cluster-master.component cd');
  }

另一种方法是手动控制变化检测的打开或者关闭,并手动触发

constructor(private cd: ChangeDetectorRef) {
  cd.detach()
  setInterval(() => {
    this.cd.detectChanges()
  }, 5000)
}

三、Angular 变更检测

Angular 的核心是组件化,组件的嵌套会使得最终形成一棵组件树,Angular 的变化检测可以分组件进行,每个组件都有对应的变化检测器 ChangeDetector,可想而知这些变化检测器也会构成一棵树。
在 Angular 中每个组件都有自己的变化检测器,这使得我们可以对每个组件分别控制如何以及何时进行变更检测。

四、变更检测策略

Angular还让开发者拥有定制变化检测策略的能力。

  • default: 每次变更检测都会引起组件的变更检测,包括其他组件的状态变化,以及本组件引用型变量内部属性值变化

  • Onpush: 每次变更检测会跳过本组件的变更检查,除非满足一些条件

4.1 default

Angular 默认的变化检测机制是 ChangeDetectionStrategy.Default,每次异步事件 callback 结束后,NgZone会触发整个组件树 至上而下做变化检测

4.2 onPush

OnPush 策略,用以跳过某个 component 以及它下面所有子组件的变化检测

其实在设置了 OnPush 策略以后,还是有许多方法可以触发变更检测的;

  • 1)组件的 @Input 属性的引用发生变化。

  • 2)组件内的 DOM 事件,包括它子组件的 DOM 事件,比如 click、submit、mouse down

  • 3)组件内的 Observable 订阅事件,同时设置 Async pipe

  • 4)组件内手动使用 ChangeDetectorRef.detectChanges()、ChangeDetectorRef.markForCheck()、ApplicationRef.tick() 方法

五、变化检测对象引用

  • markForCheck():使用于子组件,将该子组件到根组件之间的路径标记起来,通知 angular 检测器下次变化检测时一定检查此路径上的组件,即使设置了变化检测策略为 onPush

  • detectChanges():手动发起该组件到各个子组件的变更检测

  • detach():将组件的检测器从检测器数中脱离,不再受检测机制的控制,除非重新 attach 上

  • reattach():把脱离的检测器重新链接到检测器树上

到此,相信大家对“angular的变更机制是什么”有了更深的了解,不妨来实际操作一番吧!这里是蜗牛博客网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:niceseo99@gmail.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

评论

有免费节点资源,我们会通知你!加入纸飞机订阅群

×
天气预报查看日历分享网页手机扫码留言评论Telegram