Getting url id with params and ActivatedRoute Angular 2

Question

I am trying to get a uuid from the URL (which looks like https://something.com/card?id=where uuid goes) and then use that uuid to get a http get request.

Right now I have my app.component.ts looks like:

private cardUuid: string;

constructor(private service: AppService,
            private route: ActivatedRoute){
            let sub = this.route.params.subscribe((params: Params) => {
                  this.cardUuid = params['id'];
                  console.log(this.cardUuid)
                })

}


ngOnInit(){
  this.service.browserUuid = 'http://address/cards?uuid=' + this.sub.cardUuid;
    console.log(this.sub.cardUuid)

}

My console logs are coming back as undefined. I am wondering why that is the case? Is the method for getting the uuid wrong or is the call timing wrong?

Any help/tips/suggestions would be much appreciated.

Update: after a suggestion from @Alexander Staroselsky, I restructured my method of calling the uuid from the url per angular.io docs.

app.component.ts:

card: Card = {};

ngOnInit() {
 this.route.paramMap
  .switchMap((params: ParamMap) =>
    this.service.fetchCardUuid(+params.get('id')))
  .subscribe(
    card => {
      this.card = card;
      this.getVenueUuid(this.card);
    });
}

app-service.ts:

public UuidUrl = 'http://websiteaddress/cards?uuid='

constructor(private http: Http){}


private extractData(res:Response) {
  let body = res.json();
  return body || [];
}

fetchCardUuid(id: number) {
  return this.http.get(this.UuidUrl + id)
    .map(this.extractData)
}

However I am still not getting the app to load properly using the Uuid that is being fetched from the Url. In the console network is showing a get request of card?uuid=0. Again, any help would be much appreciated.

Answer 1

The format for the URL you provided is utilitizing query params (queryParams) rather than route params.

Update:

params would be used to retrieve a route parameter such as id in the following routing configuration (the :id in 'hero/:id'):

queryParams would be used to retrieve query params from a url pattern such as your https://something.com/card?id=. The identifier would be id, the part after ? and before the =.

{ path: 'hero/:id', component: HeroDetailComponent }

You can retrieve the query params in a similar way to this.route.params.subscribe() using this.route.queryParams.subscribe() like this:

constructor(
    private service: AppService, 
    private route: ActivatedRoute) {}

ngOnInit() {
    let sub = 
        this.route.queryParams
          .subscribe((queryParams: Params) => {
            this.cardUuid = queryParams['id'];
            console.log(this.cardUuid);

            this.service.browserUuid = 'http://address/cards?uuid=' + this.cardUuid;
          });


}

UPDATE:

Depending on the version of Angular (4+) you are using, you need access query params via an observable on ActivatedRoute called queryParamMap:

queryParamMap
An Observable that contains a map of the query parameters available to all routes. The map supports retrieving single and multiple values from the query parameter.

this.route.queryParamMap
    .subscribe((queryParams: QueryParamMap)) => {
        this.cardUuidt = queryParams.get('id');
        console.log(this.cardUuidt);

        this.service.browserUuid = 'http://address/cards?uuid=' + this.cardUuid;
});

Update:

One potential issue that could be causing issues is this.sub.cardUuid in ngOnInit(). You are defining a variable sub representing the Observable that is local to scope of the constructor. It would not be accessible in ngOnInit(). If this.sub is attempting to refer to the sub in constructor, that subscription would not have route params like cardUuid directly available. this.sub would come back undefined and this.sub.cardUuid would also in turn come back undefined. Also, you can't count on ngOnInit being executed after subscribe() has executed, so the resolved cardUuid from params may simply not be available.

Here is a plunker of the official Angular router live example. If you look at file app/hero-detail.component.ts and review the notes and the console statements when clicking into a hero detail component/view, you'll the undefined errors from trying to log this.sub and this.sub.uuid.

Hopefully that helps!

Answer 2

With the help of @AlexanderStaroselsky and @Angular docs, a solution was found.

My final ngOnInt() in app.component.ts looks like this:

ngOnInit() {
  this.route.queryParamMap
    .switchMap((params: Params) =>
      this.service.fetchCardUuid(params.get('id')))
    .subscribe(
      card => {
        this.card = card;
        this.getVenueUuid(this.card);
      });
}

This solution effectively gets the id from the Url and sends that id into a my service to make a get request. Again, cred goes to @AlexanderStaroselsky for the solution.