Angular – How to pass data by the router link

Refer to google page of!#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';
        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';
        private route: ActivatedRoute,
        private router: Router
    ) {... }
ngOnInit() {
            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.