Angular中从工具文件导入进度条函数失效问题排查

问题根源 #

JavaScript中number属于基本数据类型，传递函数参数时是值拷贝。工具函数loadingProgress接收的loadingVal只是组件中this.loadingVal的一个副本，函数内部修改这个副本的值，不会影响组件中的原始变量，自然无法触发视图更新。

而在组件内直接写逻辑时，setTimeout回调通过this.loadingVal访问的是组件实例的成员变量，修改的是原始值，Angular的变更检测能捕获到这个变化并同步更新进度条视图。

解决方案 #

方案1：通过引用类型传递（对象包装） #

把进度值包装成对象，利用引用类型传递时共享内存地址的特性，让工具函数能直接修改原始对象的属性：

修改snackbarUtils.ts：

export function loadingProgress(progressRef: { value: number }) {
  for (let i = 0; i < 100; i++) {
    window.setTimeout(() => {
      // 防止进度超过100%
      if (progressRef.value < 100) {
        progressRef.value += 5;
      }
    }, i * 100);
  }
}

修改组件snackbar.component.ts：

import { loadingProgress } from "../snackbarUtils";

export class SnackbarComponent implements OnInit {
  // 用对象包装进度值
  progress = { value: 1 };

  ngOnInit(): void {
    loadingProgress(this.progress);
  }
}

修改模板snackbar.component.html：

<div class="snack-bar-container">
 <div class="snack-bar-row">
  <mat-progress-bar mode="determinate" [value]="progress.value"></mat-progress-bar> 
  <span class="snack-bar-message">This is a snackbar</span>
 </div>
</div>

方案2：使用回调函数更新值 #

让工具函数通过回调通知组件更新进度值，保持组件对状态的控制权：

修改snackbarUtils.ts：

export function loadingProgress(updateCallback: (newVal: number) => void) {
  let currentVal = 1;
  for (let i = 0; i < 100; i++) {
    window.setTimeout(() => {
      currentVal += 5;
      // 确保进度不超过100%
      const clampedVal = Math.min(currentVal, 100);
      updateCallback(clampedVal);
    }, i * 100);
  }
}

组件内调用：

import { loadingProgress } from "../snackbarUtils";

export class SnackbarComponent implements OnInit {
  loadingVal: number = 1;

  ngOnInit(): void {
    loadingProgress((val) => {
      this.loadingVal = val;
    });
  }
}

模板无需修改，保持原[value]="loadingVal"即可。

方案3：RxJS流（Angular推荐风格） #

利用RxJS的可观察对象处理进度流，更符合Angular的响应式编程思想，还能方便管理订阅生命周期：

修改snackbarUtils.ts：

import { interval, map, takeWhile } from 'rxjs';

export function loadingProgress() {
  let currentVal = 1;
  // 每隔100ms发射一次，直到进度到100%
  return interval(100).pipe(
    takeWhile(() => currentVal < 100),
    map(() => {
      currentVal += 5;
      return Math.min(currentVal, 100);
    })
  );
}

组件内使用：

import { loadingProgress } from "../snackbarUtils";
import { Subject, takeUntil } from 'rxjs';
import { OnInit, OnDestroy } from '@angular/core';

export class SnackbarComponent implements OnInit, OnDestroy {
  loadingVal: number = 1;
  // 用于销毁订阅，防止内存泄漏
  private destroy$ = new Subject<void>();

  ngOnInit(): void {
    loadingProgress().pipe(
      takeUntil(this.destroy$)
    ).subscribe(val => {
      this.loadingVal = val;
    });
  }

  ngOnDestroy(): void {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

内容的提问来源于stack exchange，提问作者itsverde