[Angular2 Router] Using snapshot in Router

In the application, we have heros list, when click each hero, will redirect to hero detail view. That means, hero detail component will get inited everytime. Currently there is no option to navigate to bewteen two hero detail. 

 

Currently, we use Observable way:

this.hero = this.router.params
     .map((p:any) => p.id)
     .switchMap( id => this.starwarService.getPersonDetail(id));

 

There is another none Observable way, this is more performence:

export class HeroComponent implements OnInit {

  hero: Observable<any>;

  constructor(private router: ActivatedRoute,
              private starwarService: StarWarsService) {

  }

  ngOnInit() {
    const heroId = this.router.snapshot.params['id'];
    this.hero = this.starwarService.getPersonDetail(heroId);
  }

}

snapshot only init when the component init, so it won't change. If you use Observable, it means that the variable might change. In our case, use snapshot is better.

 

Github