Angular 解析器

Question

我正在按照关于该主题的 documentation 为我的路线创建一个解析器。

export class PlaceDetailResolverService implements Resolve<Place> {
  constructor(private api: ApiService, private router: Router) {}

  resolve(route: ActivatedRouteSnapshot): Observable<Place> | Observable<never> {
    let id = route.paramMap.get("id");

    return this.api.getPlace(id);
  }
}

然后在组件中

ngOnInit(): void {
  this.route.data.subscribe((data: { place: Place }) => {
    console.log(data);

    this.place = data['PlaceDetailResolverService'];
  });
}

解析器的工作原理是它可以正确获取数据，但要在组件中访问它，我必须使用它，它在文档中没有使用，对我来说听起来不太优雅。我错过了什么？

data['PlaceDetailResolverService']

路由模块相关部分

{
  path: "places/:id",
  component: PlaceComponent,
  resolve: {
    PlaceDetailResolverService
  }
}

Answer 1

您可以像这样添加映射到特定解析器的自己的密钥：

{
  path: "places/:id",
  component: PlaceComponent,
  resolve: {
    yourKey: PlaceDetailResolverService,
  }
}

在 PlaceComponent 中，您可以通过

访问它

export class PlaceComponent {
  constructor(
    private readonly _route: ActivatedRoute,
  ) {
    const place = this._route.data.subscribe((data) => {
      const place = data.yourKey;
    })
  }
}

Angular 解析器

Angular resolver

angular

angular-router

angular9