When transferring parameters between components, a common method is to use the following code:
onSelect(hero: Hero) {
this.router.navigate( ['HeroDetail', { id: hero.id }] );
}
However, if the data being passed is complex, using this approach can result in a messy URL. I experimented with passing parameters through a service at the parent level and found that it worked smoothly. This led me to modify the onSelect() function as follows:
onSelect(hero: Hero) {
this._heroService._dataStore.hero = hero;
this.router.navigate( ['HeroDetail' );
}
In the ngInit() function, I extracted the id from
this._heroService._dataStore.hero.idI have a question - are there any drawbacks to this approach? If so, how do others overcome these disadvantages?