如何将ActivatedRoute路由ID传入Firebase的WHERE方法解决orgId未定义报错

Angular 服务的构造函数会在首次被注入时立即执行，你在组件 ngOnInit 中才调用方法传递 ID，此时 service 构造逻辑早已执行完毕，构造函数中调用 where 方法时 this.orgId 还未被赋值，自然是 undefined。此外你当前的 posts 流是构造时就写死了用无效 ID 生成的，后续修改 orgId 变量也不会触发查询条件更新。

用 RxJS 的 BehaviorSubject 托管 orgId 状态，监听 orgId 变化后自动生成新的查询流，避免无效查询触发报错。

修改 post.service.ts #

import { BehaviorSubject } from 'rxjs';
import { filter, switchMap, map } from 'rxjs/operators';

// ... 其余导入保持不变

export class PostService {
  // 用BehaviorSubject存储orgId状态，初始值设为null
  private orgId$ = new BehaviorSubject<string | null>(null);
  private postCol: AngularFirestoreCollection<Post>;
  posts$: Observable<Post[]>;

  constructor(
    private afs: AngularFirestore,
    private storage: AngularFireStorage
  ) {
    // 监听orgId变化，orgId有效时才生成新的查询流
    this.posts$ = this.orgId$.pipe(
      // 过滤空值，避免触发无效Firebase查询
      filter(orgId => !!orgId),
      switchMap(orgId => {
        this.postCol = this.afs.collection('post', ref => 
          ref.where("postOrgId", "==", orgId).orderBy("createdAt", "desc")
        );
        return this.postCol.snapshotChanges().pipe(
          map(actions => actions.map(a => {
            const data = a.payload.doc.data() as Post;
            data.postId = a.payload.doc.id;
            return data;
          }))
        );
      })
    );
  }

  // 更新orgId状态
  setOrgId(idParameter: string) {
    this.orgId$.next(idParameter);
  }

  getPosts() {
    return this.posts$;
  }
}

修改 component.page.ts #

无需大改原有逻辑，仅调整调用 service 的方法名即可，记得新增组件销毁时取消订阅的逻辑避免内存泄漏：

ngOnInit() {
  this.orgId = this.activateRoute.snapshot.params['orgID'];
  console.log(this.orgId);
  // 传递orgId到service
  this.postService.setOrgId(this.orgId);
  this.orgSub = this.postService.getPosts().subscribe(posts => {
    this.posts = posts;
  });
}

ngOnDestroy() {
  // 销毁订阅
  this.orgSub?.unsubscribe();
}

内容的提问来源于stack exchange，提问作者John Paulo A. Geronimo