Angular 2结合Firebase：如何将变量传递至另一个函数？

嘿，我看你在Angular项目里用Firebase Storage处理文件上传，想要把上传过程中的变量（比如包含downloadURL和进度的upload对象）传递到另一个函数对吧？这里有几种实用的方法，根据你的场景选就行：

1. 用回调函数实时传递更新 #

如果需要在上传过程中（比如进度变化时）就把upload变量传给另一个函数，可以给pushUpload加一个回调参数，在状态更新时触发它：

pushUpload(upload: Project, onUploadUpdate: (updatedUpload: Project) => void) {
  const storageRef = firebase.storage().ref();
  const uploadTask = storageRef.child(`${this.basePath}/${upload.file.name}`).put(upload.file);

  uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, 
    (snapshot: firebase.storage.UploadTaskSnapshot) => {
      // 更新上传进度
      upload.progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
      // 调用回调传递更新后的upload
      onUploadUpdate(upload);
    },
    (error) => {
      console.error('上传出错:', error);
    },
    () => {
      // 注意：新版本Firebase不再支持直接取snapshot.downloadURL，要用getDownloadURL()
      uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) => {
        upload.url = downloadURL;
        // 上传完成后传递最终的upload对象
        onUploadUpdate(upload);
      });
    }
  );
}

// 调用时传入你的目标函数
this.pushUpload(uploadInstance, (updatedUpload) => {
  this.yourOtherFunction(updatedUpload);
});

2. 返回Promise获取最终结果 #

如果只需要在上传完成后拿到最终的upload对象，可以把pushUpload改成返回Promise，然后用async/await或者.then()传递给另一个函数：

async pushUpload(upload: Project): Promise<Project> {
  const storageRef = firebase.storage().ref();
  const uploadTask = storageRef.child(`${this.basePath}/${upload.file.name}`).put(upload.file);

  return new Promise((resolve, reject) => {
    uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, 
      (snapshot) => {
        upload.progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
      },
      (error) => reject(error),
      async () => {
        const downloadURL = await uploadTask.snapshot.ref.getDownloadURL();
        upload.url = downloadURL;
        resolve(upload);
      }
    );
  });
}

// 调用方式（用async/await）
async handleUpload() {
  try {
    const finishedUpload = await this.pushUpload(uploadInstance);
    this.yourOtherFunction(finishedUpload);
  } catch (error) {
    console.error('上传失败:', error);
  }
}

3. 共享类属性（同组件/服务内） #

如果两个函数在同一个类（Angular组件或服务）里，可以把upload存在类的属性中，另一个函数直接访问这个属性：

// 类内定义共享属性
currentUpload: Project | null = null;

pushUpload(upload: Project) {
  this.currentUpload = upload;
  const storageRef = firebase.storage().ref();
  const uploadTask = storageRef.child(`${this.basePath}/${upload.file.name}`).put(upload.file);

  uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, 
    (snapshot) => {
      this.currentUpload!.progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
      // 直接调用另一个函数，传入更新后的对象
      this.yourOtherFunction(this.currentUpload!);
    },
    (error) => console.error('上传出错:', error),
    () => {
      uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) => {
        this.currentUpload!.url = downloadURL;
        this.yourOtherFunction(this.currentUpload!);
      });
    }
  );
}

yourOtherFunction(upload: Project) {
  console.log('当前上传状态:', upload.progress, upload.url);
}

4. RxJS Subject（多组件/实时监听场景） #

如果需要在多个地方监听上传状态，可以用RxJS的Subject把upload对象作为数据流发射出去，其他函数订阅这个流：

import { Subject } from 'rxjs';

// 类内定义Subject
uploadUpdates$ = new Subject<Project>();

pushUpload(upload: Project) {
  const storageRef = firebase.storage().ref();
  const uploadTask = storageRef.child(`${this.basePath}/${upload.file.name}`).put(upload.file);

  uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, 
    (snapshot) => {
      upload.progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
      this.uploadUpdates$.next(upload);
    },
    (error) => {
      this.uploadUpdates$.error(error);
      console.error('上传出错:', error);
    },
    () => {
      uploadTask.snapshot.ref.getDownloadURL().then((downloadURL) => {
        upload.url = downloadURL;
        this.uploadUpdates$.next(upload);
        this.uploadUpdates$.complete();
      });
    }
  );
}

// 在需要接收的地方订阅
constructor() {
  this.uploadUpdates$.subscribe({
    next: (upload) => this.yourOtherFunction(upload),
    error: (err) => console.error(err),
    complete: () => console.log('上传流程结束')
  });
}

小提示 #

新版本Firebase Storage已经废弃了uploadTask.snapshot.downloadURL，必须用uploadTask.snapshot.ref.getDownloadURL()来获取下载链接，记得替换代码里的对应部分哦～

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