Событие Angular Router не закончилось

Question

У меня проблема с отображением моей «страницы редактирования продукта», когда я щелкаю конкретный элемент в моем списке.

У меня есть метод из службы, который извлекает определенные данные из пожарного магазина Firebase.

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.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

Маршрутизатор ожидает завершения наблюдения. Убедитесь, что оно завершено после выдачи первого значения, используя take(1) или first(). E.g.:

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