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

You can load resource based on the url using the a combination of ActivatedRouteand Angular 2’s Http service. Since the params and Http are both streams, you can use RxJS to get the data off the param then switchMap over to an Http request using that data.

 

Hero.component.ts:

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() {
  }

}

hero.component.html:

<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>

heros.service.ts:

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}`
        }))
    }
}

 

Github