带有 Ngrx 数据服务错误的角解析器答案

【问题标题】：Angular resolver with Ngrx data service error带有 Ngrx 数据服务错误的角解析器
【发布时间】：2021-11-10 11:04:09
【问题描述】：

我有一个正在工作的NGRX Data entity service，我想在访问路由之前预加载数据，因此我做了一个解析器。

import { Injectable } from "@angular/core";
import {
  ActivatedRouteSnapshot,
  Resolve,
  RouterStateSnapshot,
} from "@angular/router";
import { Observable, race } from "rxjs";
import { filter, first, tap, mapTo } from "rxjs/operators";
import { ExerciseEntityService } from "./exercise-entity.service";

@Injectable()
export class ExercisesResolver implements Resolve<boolean> {
  constructor(private exercisesService: ExerciseEntityService) {}

  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> {
    return this.exercisesService.loaded$.pipe(
      tap((loaded) => {
        if (!loaded) {
          this.exercisesService.getAll();
        }
      }),
      filter((loaded) => !!loaded),
      first()
    );
  }
}

如果服务响应成功，则路由得到解析，但如果出现错误，解析器将无法解析。例如，如果服务返回错误，我该如何管理？我尝试过这样的比赛，但它不起作用：

import { Injectable } from '@angular/core';
import {
  ActivatedRouteSnapshot,
  Resolve,
  RouterStateSnapshot
} from '@angular/router';
import { Observable, race } from 'rxjs';
import { filter, first, tap, mapTo } from 'rxjs/operators';
import { ExerciseEntityService } from './exercise-entity.service';

@Injectable()
export class ExercisesResolver implements Resolve<boolean> {
  constructor(private exercisesService: ExerciseEntityService) {}

  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> {
    return race(
      this.exercisesService.loaded$.pipe(
        tap((loaded) => {
          if (!loaded) {
            this.exercisesService.getAll();
          }
        }),
        filter((loaded) => !!loaded),
        first()
      ),
      this.exercisesService.errors$.pipe(mapTo(true))
    );
  }
}

【问题讨论】：

标签： angular typescript rxjs ngrx-entity angular-ngrx-data

【解决方案1】：

在使用 combineLatest、mergeMap、race 和其他运算符尝试不同类型的方法后，以这种方式解决：

import { Injectable } from '@angular/core';
import {
  ActivatedRouteSnapshot,
  Resolve,
  RouterStateSnapshot
} from '@angular/router';
import { Observable, Subscriber } from 'rxjs';
import { filter, first, tap } from 'rxjs/operators';
import { ExerciseEntityService } from './exercise-entity.service';

@Injectable()
export class ExercisesResolver implements Resolve<boolean> {
  constructor(private exercisesService: ExerciseEntityService) {}

  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> {
    const loadExercises = (subscriber: Subscriber<boolean>) => {
      this.exercisesService.loading$
        .pipe(
          filter((loading) => !loading),
          first()
        )
        .subscribe({
          next: (loading) => {
            subscriber.next(true);
            subscriber.complete();
          }
        });
      this.exercisesService.getAll();
    };

    const resolve$ = new Observable<boolean>((subscriber) => {
      this.exercisesService.loaded$
        .pipe(
          tap((entitiesLoaded) => {
            if (!entitiesLoaded) {
              loadExercises(subscriber);
            } else {
              subscriber.next(true);
              subscriber.complete();
            }
          })
        )
        .subscribe();
    });

    return resolve$;
  }
}

【讨论】：