首页 > 代码库 > [Angular2 Router] Load Data Based on Angular 2 Route Params
[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
[Angular2 Router] Load Data Based on Angular 2 Route Params
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。