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的更多相关文章

  1. [Angular2 Router] Resolving route data in Angular 2

    From Article: RESOLVING ROUTE DATA IN ANGULAR 2 Github If you know Anuglar UI router, you must know ...

  2. LOAD DATA INFILE – performance case study

    转: http://venublog.com/2007/11/07/load-data-infile-performance/ I often noticed that people complain ...

  3. [Angular2 Router] CanDeactivate Route Guard - How To Confirm If The User Wants To Exit A Route

    In this tutorial we are going to learn how we can to configure an exit guard in the Angular 2 Router ...

  4. mysql load data 乱码

    解决方案: http://stackoverflow.com/questions/26256421/sql-load-data-infile-utf8-issue 即: load data local ...

  5. Mybatis拦截器 mysql load data local 内存流处理

    Mybatis 拦截器不做解释了,用过的基本都知道,这里用load data local主要是应对大批量数据的处理,提高性能,也支持事务回滚,且不影响其他的DML操作,当然这个操作不要涉及到当前所lo ...

  6. mysql load data 乱码的问题

    新学mysql在用load data导入txt文档时发现导入的内容,select 之后是乱码,先后把表,数据库的字符集类型修改为utf8,但还是一样,最后在 http://bbs.chinaunix. ...

  7. mysql load data infile的使用 和 SELECT into outfile备份数据库数据

    LOAD DATA [LOW_PRIORITY | CONCURRENT] [LOCAL] INFILE 'file_name.txt' [REPLACE | IGNORE] INTO TABLE t ...

  8. 快速的mysql导入导出数据(load data和outfile)

    1.load data: ***实际应用:把日志生成的xls文件load到MySQL中: mysql_cmd = "iconv -c -f utf-8 -t gbk ./data/al_ve ...

  9. 记录load data infile 的用法

    load data local infile 'd:/1.txt' into table tcm.wm_dis_category fields terminated by';' lines termi ...

随机推荐

  1. MySQL_PHP学习笔记_2015_0923_MySQL如何开启事件

    1. 查看事件状态>>>>>>>>>>>>>>>>>>>>>>> ...

  2. 【LeetCode】14 - Longest Common Prefix

    Write a function to find the longest common prefix string amongst an array of strings. Solution: cla ...

  3. Java与云计算有什么关系呢

    在如今这个信息技术高速发展的今天,云计算已经不是一个陌生的概念了,但是,当云计算遇到java将会有什么样的问题产生呢?下面,新霸哥将会为你揭晓Java与云计算之间的关系. 众所周知,java是一种应用 ...

  4. bzoj 1806 [Ioi2007]Miners 矿工配餐(DP)

    [题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1806 [题意] 给定一个权在1..3内的序列,在保持相对位置不变的情况下拆分成两个序列 ...

  5. Linker scripts之MEMORY

    1 MEMORY command The MEMORY command describes the location and size of blocks of memory in the targe ...

  6. ZOJ-3349 Special Subsequence 线段树优化DP

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3349 题意:给定一个数列,序列A是一个满足|Ai-Ai-1| & ...

  7. 3Com Network Supervisor与IBM Tivoli NetView两款网管软件操作视频

    3Com Network Supervisor与IBM Tivoli NetView两款网管软件操作视频   网管软件必须能够实实在在的给我们带来好处,对于企业网络管理来说,其作用体现在以下几个方面: ...

  8. [转]软件开发过程(CMMI/RUP/XP/MSF)是与非?

    经常看到和听到大家在争论敏捷过程.RUP和CMM 哪个软件开发过程更好或者哪个过程不好,各自都有理由.争论得不亦乐乎......实际上,没有十全十美的过程,也不存在更好的过程.关键是什么样的过程适合自 ...

  9. svn switch relocate用法

    svn info svn info 得到 Path: . Working Copy Root Path: /Users/chunhuizhao/phpworkspace/buptef_wxpay/tr ...

  10. getGuid()

    function GetGUID: string;var  LTep: TGUID;begin  CreateGUID(LTep);  Result := GUIDToString(LTep);  R ...