Как получить возвращаемое наблюдаемое из AngularFirestore и разрешить защиту моего маршрутизатора

Question

Вопрос: Как я могу позвонить в пожарное хранилище и разрешить охрану маршрутизатора с помощью полезной нагрузки, возвращенной из пожарного хранилища?

Проблема: моя защита разрешения маршрута не разрешается, даже если значение из firestore возвращается и определено.

import {
  ActivatedRouteSnapshot,
  Resolve,
  RouterStateSnapshot,
} from '@angular/router';
import { AngularFirestore } from 'angularfire2/firestore';
import { Observable } from 'rxjs';
import { Injectable } from '@angular/core';
import { map } from 'rxjs/operators';


@Injectable()
export class RouteResolve implements Resolve<any> {
  constructor(private db: AngularFirestore) {
  }

  resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
    return this.db
               .collection('routes')
               .doc('work')
               .valueChanges()
               .pipe(
                 map((item) => {
                   if (item) {
                     console.log('items', item) // this logs just fine.
                     return item; // this doesen't resolve the router guard.
                   }
                 }));
  }
}

Все работает, но завершенная решимость. Если я просто верну true, разрешение будет работать так, как задумано.

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
  return true; // this will resolve just fine
}

Answer 1

Добавлять pipe(first()) на ваш valueChanges() наблюдаемым. Угловой маршрутизатор ждет, пока наблюдаемое не будет завершено, и это гарантирует, что наблюдаемое будет завершено после первого изменения значения.

return this.db
           .collection('routes')
           .doc('work')
           .valueChanges()
           .pipe(first())
           .pipe(
             map((item) => {
               if (item) {
                 console.log('items', item) // this logs just fine.
                 return item; // this doesen't resolve the router guard.
               }
             }));