Angular resolver

Question

I'm creating a resolver for my routes following the documentation on that subject.

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

and then in the component

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

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

The resolver works in the sense that it fetches the data correctly, but to access it in the component I have to use this which is not used in the documentation and doesn't sound very elegant to me. What am I missing?

data['PlaceDetailResolverService']

The relevant part of the routing module

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

Answer 1

You can just add your own key that maps to a specific resolver like so:

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

Inside PlaceComponent you can then access it via

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