angular8 脏值检查

最新推荐文章于 2023-06-21 15:28:43 发布

原创最新推荐文章于 2023-06-21 15:28:43 发布 · 1.2k 阅读

2 ·

CC 4.0 BY-SA版权

angular8 专栏收录该内容

21 篇文章

订阅专栏

本文深入探讨Angular框架中的脏值检查机制，解释其工作原理，包括何时触发及如何进行状态值比较。通过实例展示了使用NgZone和ChangeDetectionStrategy来优化性能的方法。

什么是脏值检查？

当数据改变时更新视图（DOM）

什么时候会触发脏值检查？

浏览器事件（如click,mouseover,keyup等）

setTimeout()和setInterval()

HTTP请求

如何进行检测

检查两个状态值：当前状态和新状态

import { Component, OnInit, NgZone } from '@angular/core';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
 
  _title;
  public get title() : string {
    console.log("脏值检测")
    return this._title;
  }

  constructor(private ngZone : NgZone ) { 
    this._title = "hi"
  }


  ngOnInit() {
  }
  ngAfterViewChecked(): void {
    //Called after every check of the component's view. Applies to components only.
    //Add 'implements AfterViewChecked' to the class.
    this.ngZone.runOutsideAngular(()=>{
      setInterval(()=>{
        this._title = "您好"
      },100)
    })
  }

}

import { Component, OnInit, NgZone, ViewChild, Renderer2 } from '@angular/core';
import { formatDate } from '@angular/common';

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
 _time;
 @ViewChild("timeRef",{static:true}) timeRef:Element;
  public get time() : number {
    return this._time;
  }
  constructor(private ngZone : NgZone,private rd2:Renderer2 ) { 
  }
  ngOnInit() {
  }
  ngAfterViewChecked(): void {
    //Called after every check of the component's view. Applies to components only.
    //Add 'implements AfterViewChecked' to the class.
    this.ngZone.runOutsideAngular(()=>{
      setInterval(()=>{
        this.rd2.setProperty(
          this.timeRef.nativeElement,
          'innerText',
          formatDate(Date.now(),'HH:mm:ss:SSS','ZH-Hans'))
      },100)
    })
  }
  handleClick(){
      
  }
}

如果报下面的错的话

import { registerLocaleData } from '@angular/common';

import zh from '@angular/common/locales/zh';

registerLocaleData(zh);

在@component中添加

changeDetection:ChangeDetectionStrategy.OnPush

如果遇到路由传参的话调到其他页面再跳回来的话跳不回来

constructor(private cd:ChangeDetectorRef) { }
 ngOnInit() {
    this.route.paramMap.subscribe(params => {
      this.selectedTabLink = params.get('tabLink')
      this.cd.markForCheck();
    })
    this.channels = this.service.getChannels()
    this.imageSliders = this.service.getImageSliders()
  }