Retrieve data from url wiith params in angular2

Question

I'm having a hard time getting the data from my query string when using routerLink to navigate to another component. Have done after the dokumentation from angular.io, so I'm not sure what is wrong.

Component 1:

This component contain the routerLink which look like this:

<div class="column small-12 large-8 gutter-xsmall-up end waiting">
     Could not find the movie, please go <a [routerLink]="['/request']" [queryParams]="{id:MovieFromImdb.Id, title: MovieFromImdb.Title}">request it</a>
</div>

This produces this url:

http://localhost:3000/request?id=tt0117500&title=The%20Rock

Component 2:

In this component, I need to retrive the data, but somehow it only stay undefined when using console.log.

Here is what I have tried.

import { Component } from '@angular/core';
import { AppState } from '../app.service';
import { Params, ActivatedRoute } from '@angular/router';

export class Request {

    private typeArray: Array<any>;
    private defaultSelection: number;
    private Title: string;
    private Link: string;

    constructor(public requestService: RequestService, private route:  ActivatedRoute,) {
        this.defaultSelection = 2;
        this.typeArray = requestService.createList();
    }

    requestMovie(title, link, quality) {
         console.log(title, link, quality);


    }

    ngOnInit() {

        this.route.params.forEach((params: Params) => {
            this.Title = params['title'];
            this.Link = params['id'];

        });

        console.log(this.route.snapshot.params['id'])
        console.log(this.route.snapshot.params['title'])

     }

}

Can any see what I have done wrong here?

Using the newest angular2 release.

Have already tried that, that what I have the top example from?? — Mikkel
– Mikkel, Commented Sep 23, 2016 at 9:30

slaesh · Accepted Answer · 2016-09-23 09:35:43Z

2

It's quite easy, you should use queryParams instead of params.

ngOnInit() {

    this.route.queryParams.forEach((params: Params) => {
        this.Title = params['title'];
        this.Link = params['id'];

    });

    console.log(this.route.snapshot.queryParams['id'])
    console.log(this.route.snapshot.queryParams['title'])

 }

https://angular.io/docs/ts/latest/api/router/index/ActivatedRoute-interface.html#!#queryParams-anchor

answered Sep 23, 2016 at 9:35

slaesh

17k6 gold badges53 silver badges54 bronze badges

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

Comments

Joe Keene · Accepted Answer · 2016-09-23 10:04:57Z

2

You can use subscribe to the route params like so:-

ngOnInit() {
      this.route.params.subscribe(params => {
           for(let param in params ) {
                console.log(param, "the param");
           }
      });
}

answered Sep 23, 2016 at 10:04

Joe Keene

2,36124 silver badges29 bronze badges

1 Comment

Victor Odiah Over a year ago

You can subscribe to ActivatedRoute.queryParams. This link might help: modewagon.wordpress.com/2017/09/12/…

Collectives™ on Stack Overflow

Retrieve data from url wiith params in angular2

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related