[Angular2 Router] Load Data Based on Angular 2 Route Params

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from "@angular/router";
import {StarWarsService} from "../heros.service";
import {Observable} from "rxjs";

@Component({
  selector: 'app-hero',
  templateUrl: 'hero.component.html',
  styleUrls: ['hero.component.css']
})
export class HeroComponent implements OnInit {

  hero: Observable<Object>;
  constructor(private router: ActivatedRoute, private starwarService: StarWarsService) {
    this.hero = router.params.map((p:any) => p.id)
      .switchMap( id => this.starwarService.getPersonDetail(id))
      .startWith({
        name: 'Loading...',
        image: ''
      })
  }

  ngOnInit() {
  }

}

<div>
  <h2>{{(hero | async)?.name}}</h2>
  <img [src]="(hero | async)?.image" [alt]="(hero | async)?.name">

  <!--
    Notice that, here we use ? mark. This is not necessary if we use 'startWith({name: '', image: ''})'
    startWith will set init value, so that hero.name / hero.image won't be undefined
   -->
</div>

import {Injectable, Inject} from '@angular/core';
import {STARWARS_BASE_URL} from "../shared/constance.service";
import {Http} from "@angular/http";
import "rxjs/add/operator/map";
import "rxjs/add/operator/switchMap";

@Injectable()
export class StarWarsService {

    constructor(@Inject(STARWARS_BASE_URL) private starwarUrl,
      private http: Http
    ) {}

    getPeople(){
      return this.http.get(`${this.starwarUrl}/people`)
        .map( res => res.json())
    }

    getPersonDetail(id){
      return this.http.get(`${this.starwarUrl}/people/${id}`)
        .map( res => res.json())
        .map( (hero:any) => Object.assign({}, hero, {
          image: `${this.starwarUrl}/${hero.image}`
        }))
    }
}