Question

考虑以下路线：

path: '',
component: MyComponent,
resolve: {
    foo: FooResolver,
    bar: BarResolver
}

有没有办法让角度来执行第一个解析器FooResolver，并且只有在第一个解析器完成后才执行第二个解析器BarResolver？

Answer 1

解析器并行解析。如果Foo和Bar应该按顺序解析，则它们应该是单个FooBar解析器。如果它们应该在其他路由中单独使用，FooBar可以包装Foo和Bar解析器：

class FooBarResolver implements Resolve<{ foo: any, bar: any }> {
  constructor(
    protected fooResolver: FooResolver,
    protected barResolver: BarResolver
  ) {}

  async resolve(route): Promise<{ foo: any, bar: any }> {
    const foo = await this.fooResolver.resolve(route);
    const bar = await this.barResolver.resolve(route);

    return { foo, bar };
  }
}

FooBar应该知道这一事实，如果它是从Foo和Bar返回的承诺或可观察的，以便正确解决它们。否则应添加额外的安全设备，例如await Observable.from(this.fooResolver.resolve(route)).toPromise()。

FooBar和Foo或Bar不应出现在同一路线中，因为这会导致重复的分辨率。

Answer 2

我发现了一种稍微更优雅的解决方案，如果您不关心所有解析器的结果，可以使用该解决方案：

class FooBarResolver implements Resolve<Observable<any>> {
    constructor(
        protected fooResolver: FooResolver,
        protected barResolver: BarResolver
    ) { }

    resolve(): Observable<any>
    {
        return this.fooResolver.resolve().pipe(
            concat(this.barResolver.resolve()),
            concat(this.barResolver.resolve())
        );
    }
}

我用它来触发服务中的数据加载。并且因为他们将数据/ isLoading /错误写入秋田存储，所以我不在乎解析器的结果。

Answer 3

我在单个combineLatest中使用resolver解决了这种情况。您可以这样做：

@Injectable({providedIn: 'root'})
export class FooBarResolver implements Resolve<any> {
  constructor(
    private readonly fooResolver: FooResolver,
    private readonly barResolver: BarResolver  
  ) {}

  resolve() {
    return combineLatest(
      this.fooResolver.resolve(), 
      this.barResolver.resolve()
    ).pipe(map(([users, posts]) => ({users, posts})))
  }
}

Answer 4

另一个选择是包装您的依赖路由，并在包装器上使用必要的解析器。

IE。

{ path: '', resolve: { foo$: FooResolver }, children: [
    { path: 'mySubRoute', resolve:  {bar$: BarResolver }, component: BarComponent }
]}

*如果遇到相对的路径解析问题，请尝试使用

relativeLinkResolution: "corrected"

在forRoot路由器方法中。更多信息，请点击Angular RouterLink relative path does not work in component having empty path

在Angular 2+中一个接一个地执行解析器

4 个答案: