Angular变化检测 2.0版本学习

crary,记忆

于 2024-03-07 09:00:00 发布

阅读量1k

点赞数 19

分类专栏：前端知识总结文章标签：学习前端 javascript angular

本文链接：https://blog.csdn.net/qq_44327851/article/details/136201279

版权

前端知识总结专栏收录该内容

66 篇文章 1 订阅

订阅专栏

在学习如何在Angular中实现文字逐字显示的过程中，我发现要保证用户的体验感的关键点在于：如何确保实时更新.html页面的内容显示，保证及时在UI界面反应出后端返回的数据? 那如何解决这个问题呢？其实我在博客中有提到过这个问题的解决办法，大家有兴趣可以去帮忙简单的检阅一下：https://blog.csdn.net/qq_44327851/article/details/135152188

下面是上面博客的进阶版学习---->这篇博客主要是文字逐字显示过程页面实时更新的解决办法，话不多说，直接上代码。

使用setTimeout函数创建定时器，更新文字显示，并手动触发变更检测：

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

@Component({
  selector: 'app-root',
  template: `
    <div>{{ displayedText }}</div>
  `
})
export class AppComponent {
  text = 'Hello World';
  displayedText = '';
  currentIndex = 0;

  constructor(private cdr: ChangeDetectorRef) {}

  ngOnInit() {
    const updateText = () => {
      this.displayedText = this.text.slice(0, this.currentIndex + 1);
      this.currentIndex++;
      this.cdr.detectChanges();
      if (this.currentIndex < this.text.length) {
        setTimeout(updateText, 1000);
      }
    };

    updateText();
  }
}

使用NgZone服务在NgZone之外运行文字更新逻辑：

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

@Component({
  selector: 'app-root',
  template: `
    <div>{{ displayedText }}</div>
  `
})
export class AppComponent {
  text = 'Hello World';
  displayedText = '';
  currentIndex = 0;

  constructor(private zone: NgZone) {}

  ngOnInit() {
    this.zone.runOutsideAngular(() => {
      const interval = setInterval(() => {
        this.zone.run(() => {
          this.displayedText = this.text.slice(0, this.currentIndex + 1);
          this.currentIndex++;
        });
        if (this.currentIndex === this.text.length) {
          clearInterval(interval);
        }
      }, 1000);
    });
  }
}

使用OnPush变更检测策略和markForCheck方法：

import { Component, ChangeDetectorRef, ChangeDetectionStrategy } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div>{{ displayedText }}</div>
  `,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent {
  text = 'Hello World';
  displayedText = '';
  currentIndex = 0;

  constructor(private cdr: ChangeDetectorRef) {}

  ngOnInit() {
    const interval = setInterval(() => {
      this.displayedText = this.text.slice(0, this.currentIndex + 1);
      this.currentIndex++;
      this.cdr.markForCheck();
      if (this.currentIndex === this.text.length) {
        clearInterval(interval);
      }
    }, 1000);
  }
}

使用AsyncPipe结合Observable实现文字逐字显示：

import { Component } from '@angular/core';
import { timer } from 'rxjs';

@Component({
  selector: 'app-root',
  template: `
    <div>{{ (text$ | async) }}</div>
  `
})
export class AppComponent {
  text = 'Hello World';
  text$ = timer(0, 1000).pipe(
    map(index => this.text.slice(0, index + 1)),
    take(this.text.length)
  );
}

使用Renderer2服务手动更新DOM元素的innerText属性：

import { Component, Renderer2, ElementRef } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div #textElement></div>
  `
})
export class AppComponent {
  text = 'Hello World';
  currentIndex = 0;

  constructor(private renderer: Renderer2, private el: ElementRef) {}

  ngOnInit() {
    const interval = setInterval(() => {
      this.renderer.setProperty(this.el.nativeElement, 'innerText', this.text.slice(0, this.currentIndex + 1));
      this.currentIndex++;
      if (this.currentIndex === this.text.length) {
        clearInterval(interval);
      }
    }, 1000);
  }
}

使用ViewChild装饰器获取DOM元素的引用，直接操作DOM元素实现文字逐字显示：

import { Component, ViewChild, ElementRef } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `
    <div #textElement></div>
  `
})
export class AppComponent {
  @ViewChild('textElement', { static: true }) textElement: ElementRef;
  text = 'Hello World';
  currentIndex = 0;

  ngOnInit() {
    const interval = setInterval(() => {
      this.textElement.nativeElement.innerText = this.text.slice(0, this.currentIndex + 1);
      this.currentIndex++;
      if (this.currentIndex === this.text.length) {
        clearInterval(interval);
      }
    }, 1000);
  }
}

使用NgZone服务结合setTimeout函数实现文字逐字显示：

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

@Component({
  selector: 'app-root',
  template: `
    <div>{{ displayedText }}</div>
  `
})
export class AppComponent {
  text = 'Hello World';
  displayedText = '';
  currentIndex = 0;

  constructor(private zone: NgZone) {}

  ngOnInit() {
    this.zone.runOutsideAngular(() => {
      const updateText = () => {
        this.displayedText = this.text.slice(0, this.currentIndex + 1);
        this.currentIndex++;
        if (this.currentIndex < this.text.length) {
          setTimeout(updateText, 1000);
        }
      };

      updateText();
    });
  }
}

使用ElementRef服务直接操作DOM元素实现文字逐字显示：

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

@Component({
  selector: 'app-root',
  template: `
    <div #textElement></div>
  `
})
export class AppComponent {
  constructor(private el: ElementRef) {}

  ngOnInit() {
    const textElement = this.el.nativeElement.querySelector('#textElement');
    const text = 'Hello World';
    let currentIndex = 0;

    const interval = setInterval(() => {
      textElement.innerText = text.slice(0, currentIndex + 1);
      currentIndex++;
      if (currentIndex === text.length) {
        clearInterval(interval);
      }
    }, 1000);
  }
}

使用Renderer2服务创建文本节点，逐步添加到DOM元素中实现文字逐字显示：

import { Component, Renderer2, ElementRef } from '@angular/core';

@Component({
  selector: 'app-root',
  template: `java
    <div #textElement></div>
  `
})
export class AppComponent {
  text = 'Hello World';
  currentIndex = 0;

  constructor(private renderer: Renderer2, private el: ElementRef) {}

  ngOnInit() {
    const textElement = this.el.nativeElement.querySelector('#textElement');
    const text = 'Hello World';

    const interval = setInterval(() => {
      const textNode = this.renderer.createText(text.slice(0, this.currentIndex + 1));
      this.renderer.appendChild(textElement, textNode);
      this.currentIndex++;
      if (this.currentIndex === text.length) {
        clearInterval(interval);
      }
    }, 1000);
  }
}

使用@Input装饰器监听输入属性的变化，更新文字显示：

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

@Component({
  selector: 'app-root',
  template: `
    <div>{{ displayedText }}</div>
  `
})
export class AppComponent {
  @Input() text: string;
  displayedText = '';
  currentIndex = 0;

  ngOnInit() {
    const interval = setInterval(() => {
      this.displayedText = this.text.slice(0, this.currentIndex + 1);
      this.currentIndex++;
      if (this.currentIndex === this.text.length) {
        clearInterval(interval);
      }
    }, 1000);
  }
}