How to resolve data from an api using angular route resolver

Question

I am trying to use angular route resolver to load an endpoint before it displays but I can not find a way to go about it How do I pass the url of my API in my resolver as a parameter? For some unique reason I need to pass in an parameter so I can not pass the api in the service.

This is my service

@Injectable()
export class HnService {  
  constructor(private http: HttpClient) {}

  getTopPosts(endpoint) {
    return this.http.get(endpoint);
  }
}

This is my resolver file

@Injectable()
export class HnResolver implements Resolve<any> {
  constructor(private hnService: HnService) {}

  resolve() {
    return this.hnService.getTopPosts(?);
  }
}

lealceldeiro · Accepted Answer · 2018-09-12 13:17:08Z

4

If you just want to pass data and access to this data in your resolver you can use the data property when you define the path.

First of all your route should be like this

 {
    path: 'hn/:id',
    component: HnDetailsComponent,
    resolve: {
      response: HnResolver
    },
    data:{
      apiURL: 'my/api/url'
    }
}

in the resolve

@Injectable()
export class HnResolver implements Resolve<any> {
 constructor(private hnService: HnService) {
}

  resolve(route: ActivatedRouteSnapshot, 
state: RouterStateSnapshot): Observable<any> {
    return this.hnService.getTopPosts(route.data['apiURL']);
  }
}

edited Sep 12, 2018 at 13:17

lealceldeiro

15.1k7 gold badges54 silver badges85 bronze badges

answered Feb 21, 2018 at 16:43

YuryDG

4793 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

YuryDG Over a year ago

@arthur-decker see this one

Arthur Decker Over a year ago

I didn't use a snapshot though but your logic gave me more ideas thanks

Ruzel R. Over a year ago

Works on my end. Been searching for almost a day. I was referencing the ActivatedRoute data and getting a null value.

YuryDG · Accepted Answer · 2018-02-21 16:19:11Z

3

First of all your route should be like this

 {
    path: 'hn/:id',
    component: HnDetailsComponent,
    resolve: {
      response: HnResolver
    },
}

Your resolver should like this one

@Injectable()
export class HnResolver implements Resolve<any> {
 constructor(private HnService: hnService) {
}

  resolve(route: ActivatedRouteSnapshot, 
  state: RouterStateSnapshot): Observable<any> {
    return this.hnService.getTopPosts(route.data['id']);
  }
}

Note: is asummed that your route is something like http://localhost:4200/hn/4 where 4 is the ID of the hn that u want to see the details

in HnDetailsComponent details you can access to the hn resolved

export class HnDetailsComponent implements OnInit {

constructor(private route: ActivatedRoute) { }

  ngOnInit() {
   const myHnResolved = this.route.snapshot.data.response;
   console.log(myHnResolved)
  }
}

I hope this help u to solve your trouble.

answered Feb 21, 2018 at 16:19

YuryDG

4793 silver badges7 bronze badges

2 Comments

Arthur Decker Over a year ago

I am not passing in an ID I am passing in an API url

YuryDG Over a year ago

Please, check the new answer Arthur and let me know if u this solve your trouble

Collectives™ on Stack Overflow

How to resolve data from an api using angular route resolver

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related