Angular – How to pass data by the router link

Refer to google page of https://angular.io/docs/ts/latest/guide/router.html#!#navigate ,

I just give a myself example to show how it works. This is a master component that wswapill guide the router to a component link of  /itemdetail  and together pass one object – this.selectedItemObj to next page. (selectedItemObj  could contain the itemName, id, etc. inside.)

import { Router} from '@angular/router';
....constructor(
        private router: Router
    )...
....this.router.navigate( ['/itemdetail', this.selectedItemObj] );
...

And then  at the target component, we can try to get the router link parameters at the init stage to initialize the data:

import { ActivatedRoute, Router, Params } from '@angular/router';
...
constructor(
        private route: ActivatedRoute,
        private router: Router
    ) {... }
...
ngOnInit() {
        this.route.params.subscribe(
            params => {
                this.itemName = params['itemName'];
                this.item = + params['id'];
                // TODO, you can call your service to get more data based on the ID or name 
                   ...
                });
..........

If you do not need to do too much things after you get the params data, you can use the switchMap to do a simple service call before subscribe, refer to google link for the example there.

Advertisements