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

时间:2017-10-17 14:29:18

标签: angular angular2-routing

考虑以下路线:

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

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

4 个答案:

答案 0 :(得分:19)

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

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

FooBarFooBar不应出现在同一路线中,因为这会导致重复的分辨率。

答案 1 :(得分:1)

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

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 /错误写入秋田存储,所以我不在乎解析器的结果。

答案 2 :(得分:0)

我在单个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})))
  }
}

答案 3 :(得分:0)

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

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