Passing data through Angular2 router

I hope this will work. Try using Query Parameters.

 <nav>      <a [routerLink]="['/component1']">No param</a>      <a [routerLink]="['/component2']" [queryParams]="{ page: 99 }">Go to Page 99</a> </nav>

or

opencomponent2(pageNum) {    this.router.navigate(['/component2'], { queryParams: { page: pageNum } });  }

In child component :

constructor(    private route: ActivatedRoute,    private router: Router) {}  ngOnInit() {    this.sub = this.route      .queryParams      .subscribe(params => {        // Defaults to 0 if no query param provided.        this.page = +params['page'] || 0;      });  }

I have studied this on rangle.io website. Try this if it works for you. otherwise https://angular.io/docs/ts/latest/cookbook/component-communication.html#!#bidirectional-service is only option.

See https://angular.io/guide/router for an in-depth example. Scroll down to this code snippet:

gotoHeroes(hero: Hero) {  let heroId = hero ? hero.id : null;  // Pass along the hero id if available  // so that the HeroList component can select that hero.  // Include a junk 'foo' property for fun.  this.router.navigate(['/heroes', { id: heroId, foo: 'foo' }]);}

To get the value of 'id' in the target component:

ngOnInit() {  this.heroes$ = this.route.paramMap.pipe(    switchMap((params: ParamMap) => {      // (+) before `params.get()` turns the string into a number      this.selectedId = +params.get('id');      return this.service.getHeroes();    })  );}

Unless you want users to manipulate the query string in the addressbar, do a "atob" and "btoa" before sending and after receiving the data. Just a little security

Also, if you don't want to have a subscription, you can use the Route snapshot param as follows (just that it doesn't keep on updating like an observable, so unless the component gets re-init, it won't be getting updated value if any. Hence a good place to get the value is in the ngOnInit event handler

// beforethis._router.navigate(["/welcome/" + atob(userName)]);// afterngOnInit() {    this.userName = btoa(this.route.snapshot.params['userName']);}