Как запретить переключение маршрута, пока данные не будут сохранены с помощью ngrx и разрешены?

Question

Я хочу отказать пользователю в получении маршрута, пока у меня не будет данных в моем магазине. я попытался с решателем, но он все еще идет к маршруту, и я получаю ошибку, потому что я использую эти данные в состоянии эффекта. Я искал в Интернете, но не вижу примера, который удерживает пользователя в распознавателе до тех пор, пока данные не будут разрешены. Как я могу "удерживать" пользователя, пока у меня не появятся необходимые данные в моем магазине?

https://stackru.com/images/cd3518c2c85408d13ab bb4b459978c5b0aa01d15.png

Answer 1

Использовать canActivate или canLoad охранник. У Тодда Мотто есть статья о том, как это сделать. Предварительная загрузка ngrx/store с помощью Route Guards

@Injectable()
export class CoursesGuard implements CanActivate {
  constructor(private store: Store<CoursesState>) {}

  getFromStoreOrAPI(): Observable<any> {
    return this.store
      .select(getCoursesState)
      .do((data: any) => {
        if (!data.courses.length) {
          this.store.dispatch(new Courses.CoursesGet());
        }
      })
      .filter((data: any) => data.courses.length)
      .take(1);
  }

  canActivate(): Observable<boolean> {
    return this.getFromStoreOrAPI()
      .switchMap(() => of(true))
      .catch(() => of(false));
  }