Angular17项目中如何用Angular Fire Modular和Firebase Storage显示文件上传进度？

你的问题核心是Firebase的上传回调不在Angular的变更检测上下文里——虽然控制台能打印进度、文件也能正常上传，但Angular没检测到progress和uploadInProgress的变量变化，所以进度条不会更新。另外你的构造函数语法也存在错误，下面是具体修复方案：

1. 先修复构造函数语法错误 #

原代码里的构造函数写法颠倒了，正确的语法格式应该是：

constructor(private storage: Storage) {}

2. 引入NgZone强制触发变更检测 #

Angular的NgZone负责管理变更检测上下文，把回调里的变量更新逻辑放到zone.run()中，就能让Angular感知到变量变化并更新视图。

修改后的upload.component.ts代码：

import { ref, Storage, uploadBytesResumable } from '@angular/fire/storage';
import { NgZone } from '@angular/core'; // 引入NgZone

export class UploadComponent {
  constructor(private storage: Storage, private zone: NgZone) {} // 注入NgZone

  progress: number = 0;
  uploadInProgress: boolean = false;

  uploadFile(file: any) {      
    // 初始状态变更也放入NgZone
    this.zone.run(() => {
      this.uploadInProgress = true;
    });
    const fileRef = ref(this.storage, `storage/path/here`);

    uploadBytesResumable(fileRef, file).on('state_changed',
      (snapshot) => {
        console.log('Uploading: ', snapshot.bytesTransferred, ' of ', snapshot.totalBytes, ' bytes');
        // 进度更新逻辑包裹进NgZone
        this.zone.run(() => {
          this.progress = Math.round((snapshot.bytesTransferred / snapshot.totalBytes) * 100);
        });
      },
      (error) => {
        console.log(error);
        this.zone.run(() => {
          this.uploadInProgress = false;
        });
      },
      () => {
        // 上传完成后的状态变更也放入NgZone
        this.zone.run(() => {
          this.uploadInProgress = false;
          this.progress = 0;
        });
      }
    );
  }
}

3. 模板优化（可选但规范） #

Angular模板中不需要写this.，直接使用变量名即可，修改upload.component.html：

<ng-container *ngIf="uploadInProgress">
  <mat-progress-bar mode="determinate" [value]="progress"></mat-progress-bar>                     
</ng-container>

问题根源说明 #

@angular/fire底层基于原生Firebase SDK，它的事件回调会运行在Angular的变更检测区域之外，导致Angular无法自动捕获变量更新。用NgZone.run()包裹变量修改逻辑，就能强制Angular执行变更检测，让进度条同步更新。

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