角度解析器

Question

我正在按照有關該主題的文檔為我的路線創建解析器。

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;
    })
  }
}