angular - 使用 Angular 解析器获取异步数据

Question

我的 Angular 8 应用中有解析器

export class UserResolver implements Resolve<any> {

  constructor(
    private authService: AuthService,
  ) { }

  resolve() {
    this.authService.user.subscribe(user => {
      return user
    })
  }
}

但是这是将 null 分配给路由器数据，因为 user 在我的服务中带有异步函数(它来自主题)。如何使解析器等待从我的服务返回的数据，而不为数据分配空值？

Answer 1

有两件事:

1) 删除订阅并让解析器处理订阅。

2) 返回 Observable，而不是数据。

类似这样的事情:

export class UserResolver implements Resolve<any> {

  constructor(
    private authService: AuthService,
  ) { }

  resolve() {
    return this.authService.user;
  }
}

更新:

我的工作正常，等待然后返回数据。我的看起来像这样:

constructor(private productService: ProductService) { }

    resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<IProduct> {
        const id = +route.paramMap.get('id');
        return this.productService.getProduct(id);
    }

请注意，没有订阅，我正在返回从 http get 操作返回的 Observable。

我的路线配置如下所示:

@NgModule({
  imports: [
    SharedModule,
    InMemoryWebApiModule.forRoot(ProductData),
    RouterModule.forChild([
      { path: 'products', component: ProductListComponent },
      {
        path: 'products/:id',
        component: ProductDetailComponent,
        resolve: { resolvedData: ProductResolver }
      },
      {
        path: 'products/:id/edit',
        component: ProductEditComponent,
        resolve: { resolvedData: ProductResolver }
      }
    ])

如果您想要工作代码，我这里有一个更复杂的版本(由于添加了异常处理而更复杂):https://github.com/DeborahK/Angular-Routing/tree/master/APM-Final