代码之家 › 专栏 › 技术社区 › klaydze

角路由器事件未结束

angular-resolver angular-router google-cloud-firestore firebase angular

klaydze · 技术社区 · 6 年前

我有一个来自服务的方法,它从firebase firestore检索特定的数据。

/**
* 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));
    });
}

上面的方法将在我的解析器中调用,如下所示。

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);
                })
              );
}

产品-路由.module.ts

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

现在的问题是,每当我从列表中单击edit按钮时,什么都不会发生。这应该是重定向到我的编辑产品页,并填写所有的数据从文本框使用 this.route.snapshot.data['product'] .

enableTracing: true 我的路线好像被卡住了 Router Event: ResolveStart . 有人能告诉我为什么会这样吗?

1 回复 | 直到 6 年前

DarkLeafyGreen 6 年前

路由器等待可观察到的完成。确保在使用发出第一个值之后完成 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;
        }
      })
    );
  }

顺便说一下,你可以清理你的房间 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;
        }),
    ); 
}

推荐文章

Krish Patel · 如何在加载组件之前加载数据?

1 年前

Kortus · 如何监控是否为特定用户创建了新文档

1 年前

giroprotagonist · 部署Firebase Typescript函数错误;解组package.json:json:无法将bool解组到Go结构字段PackageJSON.devDependencies

1 年前

Sanmoy Roy · 当我尝试移动到特定布局时,我的应用程序崩溃(关闭)

2 年前

taha khamis · 如何限制用户在firestore数据库中创建多个文档?

2 年前

Demonix · React Firebase onSnapshot为映射函数返回null

2 年前

Pratul Pant · Firebase正在另一个应用服务器上上传和获取数据

2 年前

ImDarkk · FirebaseError:权限缺失或不足。使用getDocs()

2 年前

Fabian Mayer · 键不是数字时的Foreach

2 年前

user15137953 · 已求解的对象作为React子对象无效。如果要渲染子级集合,请改用数组。反应

2 年前