时间戳

首页 > 解决方案 > 使用 Angular 解析器获取异步数据

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

问题描述

我的 Angular 8 应用程序中有解析器

export class UserResolver implements Resolve<any> {

  constructor(
    private authService: AuthService,
  ) { }

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

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

标签： angularrxjs

解决方案

两件事情：

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

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

推荐阅读