Angular变更检测_angular重新渲染组件

link管理
链接快照平台
输入网页链接，自动生成快照
标签化管理网页链接
使用 Angular 变更检测策略的示例代码：

默认策略：

import { Component } from '@angular/core';
@Component({
  selector: 'app-example',
  template: `
    <h1>{{ title }}</h1>
    <button (click)="updateTitle()">Update Title</button>
export class ExampleComponent {
  title = 'Default Strategy';
  updateTitle() {
    this.title = 'Updated Title';
OnPush策略：
 
import { Component, ChangeDetectionStrategy } from '@angular/core';
@Component({
  selector: 'app-example',
  template: `
    <h1>{{ title }}</h1>
    <button (click)="updateTitle()">Update Title</button>
  changeDetection: ChangeDetectionStrategy.OnPush,
export class ExampleComponent {
  title = 'OnPush Strategy';
  updateTitle() {
    this.title = 'Updated Title';
手动策略：
 
import { Component, ChangeDetectorRef } from '@angular/core';
@Component({
  selector: 'app-example',
  template: `
    <h1>{{ title }}</h1>
    <button (click)="updateTitle()">Update Title</button>
export class ExampleComponent {
  title = 'Manual Strategy';
  constructor(private cdr: ChangeDetectorRef) {}
  updateTitle() {
    this.title = 'Updated Title';
    this.cdr.detectChanges();
示例总结：
 
**ExampleComponent**组件的 **title**属性可以通过 **updateTitle()**方法进行更新。根据所选的变更检测策略，当 **title**属性发生变化时，组件的行为将有所不同。在默认策略中，每次调用 **updateTitle()**方法时，组件的整个视图都会被重新渲染。
在 OnPush 策略中，只有在 **title**属性发生变化时，组件的视图才会被重新渲染。
在手动策略中，需要手动调用 **ChangeDetectorRef**的 **detectChanges()**方法来检查组件的变化并更新视图。 
Angular的变更检测机制是通过比较模型对象的状态来检测数据的变化。当模型对象的状态发生变化时，Angular会将这些变化记录下来并触发视图更新。 
在Angular中，模型对象的状态是通过引用来跟踪的。这意味着如果引用没有改变，即使对象的属性值发生了变化，Angular也不会检测到这个变化。 
为了优化变更检测性能，我们可以采取以下策略： 
避免使用不必要的组件和指令。
使用OnPush变更检测策略。
使用Immutable.js等不可变数据结构库。
使用ChangeDetectorRef.markForCheck()手动触发变更检测。 
除此之外，我们还可以使用Virtual Scrolling技术来优化大型列表的渲染性能，或者使用CDK中提供的CDKTable组件来优化表格的渲染性能。 
在应用程序的开发过程中，我们需要根据具体情况选择合适的优化策略，并对其进行调整和优化。只有这样，我们才能真正地提高应用程序的性能，并为用户提供更好的体验。 
总之，Angular的变更检测机制是Angular框架的核心特性之一，它可以帮助我们更好地管理应用程序中的数据和视图。在使用变更检测时，我们需要深入理解其工作原理，并采取相应的优化策略来提高应用程序的性能。
				角度hmr惰性组件
此示例显示了如何使用Angular HMR自动重新加载惰性路由和惰性（动态加载）组件。 这对于大型Angular应用程序非常有用，这些应用程序在重新加载时需要一段时间进行JIT编译。
 请注意，在下面的动画中，在a.component.ts源代码中进行更改后的瞬间，仅重新加载了应用程序中已经显示的“ A”组件。
重新加载惰性路由
这个怎么运作
大多数魔术都在。 将通过路由器延迟加载的每个模块都将使用此帮助程序类来为该模块启用HMR。 这是在用法：
  export class CModule {
    constructor(moduleRef: NgModuleRef<CModule>) {
      HmrModuleHelper.enableHmrRouterNgModule(module, moduleRef);
  HmrModuleH
简单来说变化检测就是Angular用来检测视图与模型之间绑定的值是否发生了改变，当检测到模型中绑定的值发生改变时，则同步到视图上，反之，当检测到视图上绑定的值发生改变时，则回调对应的绑定函数。
什么情况下会引起变化检测？
总结起来, 主要有如下几种情况可能也改变数据：
  用户输入操作，比如点击，提交等
  请求服务端数据(XHR)
  定时事件，比如setTimeout，setInterval
上述三种情况都有一个共同点，即这些导致绑定值发生改变的事件都是异步发生的。如果这些异步的事件在发生时能够通知到Angular框架，那么Angular框架就能及时的检测到变化。
左边表示将
概括： 一种更改检测机制，用于遍历组件树，检查每个组件的变化，并在组件属性发生变化的时候触发DOM的更新
变更检测的基本任务： 获得程序的内部状态并使之在用户界面可见。这个状态可以是任何的对象、数组、基本数据类型，…
什么引起了变更
基本上应用程序状态的改变可以由三类活动引起
用户输入操作，比如点击，表单提交等
请求服务端数据
定时事件，比如 setTimeout，setInterval
这几点有一个共同点，就是它们都是异步的，也就是说，所有的异步操作
 //查询所有数据
  selectAllSn() {
    this.http.get(webApiUrls.holdlist.selectAll, null,).subscribe(res => {
      console.log(res.data);
      //数据存储到datas
      this.datas = res.data;
2.ts中columns的值动态赋值后
this.cdr.detectChanges(); //需要通知Angular才能检测到这些更改(检测本地更改)并更新视图.  --改变[data]值时执行的方法
this.st.resetColumns(); //来更新列定义并重新加载数据
this.st.reload(); // 刷新当前页
2.自定义表格弹框
<ng-template #
				angular变更检测分为默认的（“CheckAlways”）变更检测策略 和  OnPush（“CheckOnce”）变更检测策略，angular变更检测是一种单向数据流，也就是检测永远是从父组件到子组件的，如果在一次变更周期内子组件去更改父组件就会报错（但是页面数据是能正确显示出来的），因为父组件已经检测完毕，再去改变父组件就违反了单向数据流。onPush会让应用性能更高，推荐使用onPush变更策略。
默认变更触发时机
事件：页面 click、submit、mouse down……
XHR：从后端服
				Angular的双向数据绑定基于Observable和Zone.js实现。
当一个组件中的属性或者模板中的表达式发生变化时，Angular会创建一个变更检测器，并且在组件的变更检测树中遍历所有的子组件和指令，检测它们的属性是否也发生了变化。如果发生了变化，那么Angular会通过变更检测器更新视图。
在Angular中，所有的数据绑定都是通过Observable实现的，当一个属性被绑定到一个表达式时，Angular会在这个属性上创建一个可观察对象，并且在这个对象上注册一个观察者，当这个属性的值发生变化时，会通知所有的观察者。
另外，Angular还使用Zone.js来实现变更检测的自动化。Zone.js是一个JavaScript库，可以用来监视异步操作，并且在异步操作完成后自动运行变更检测器。这样，当一个异步操作（例如一个HTTP请求）完成后，Angular会自动检测组件的变化并更新视图。
总结来说，Angular的双向数据绑定基于Observable和Zone.js实现，可以自动监测属性的变化，并且自动更新视图，使得开发者可以更加专注于业务逻辑的实现，而不需要手动更新视图。