Angular 路由器事件没有结束

Question

我在单击列表中的特定项目时呈现 "Product Edit Page" 时遇到问题。

我有一个服务方法可以从 firebase firestore 检索特定数据。

product.service.ts

/**
* Get specific product
*/
getProduct(guid: string): Observable<IProduct> {
return new Observable((observer) => {
      this.firebaseDb.collection('products')
        .doc('XNRkodfbiRoKc2DYPA3o')
        .onSnapshot((querySnapshot) => {

          let product: IProduct;
          product = <IProduct>querySnapshot.data();
          product.guid = guid;

          observer.next(product);

        }, (error) => console.log(error.message));
    });
}

上述方法将在我的 Resolver 中调用，如下所示。

产品-resolver.service.ts

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<IProduct> {
const id = route.params['id'];

return this.productService.getProduct(id)
              .pipe(
                map(product => {
                  if (product) {
                    return product;
                  }
                  console.log(`Product was not found: ${id}`);
                  this.router.navigate(['/products']);
                  return null;
                }),
                catchError(error => {
                  console.log(`Retrieval error: ${error}`);
                  return of(null);
                })
              );
}

产品-routing.module.ts

  {
    path: 'products/:id/edit',
    component: ProductEditComponent,
    canActivate: [AuthGuardService],
    resolve: { product: ProductResolver }
  }

现在的问题是，无论何时单击列表中的编辑按钮，都没有任何反应。这应该被重定向到我的编辑产品页面并使用 this.route.snapshot.data['product'].

填充文本框中的所有数据

我通过将 enableTracing: true 传递到我的路由来调试路由，它似乎卡在 Router Event: ResolveStart 中。有人可以启发我为什么会这样吗？

Answer 1

路由器等待 observable 完成。确保在使用 take(1) 或 first() 发出第一个值后完成。例如：

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<IProduct> {
    return this.productService.getProduct(route.paramMap.get('id')).pipe(
      take(1),
      map(product => {
        if (!product) {
          // noinspection JSIgnoredPromiseFromCall
          this.router.navigate(['/404']);
          return null;
        } else {
          return product;
        }
      })
    );
  }

P.S。您可以像这样清理 getProduct 方法：

getProduct(guid: string): Observable<IProduct> {
    return from(this.firebaseDb.collection('products').doc('XNRkodfbiRoKc2DYPA3o').onSnapshot()).pipe(
        map((snapshot:any) => {
            const product = <IProduct>snapshot.data();
            product.guid = guid;
            return product;
        }),
    ); 
}

Angular 路由器事件没有结束

Angular Router Event does not ended

angular

firebase

google-cloud-firestore

angular-router

angular-resolver