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

[Angular2 Router] Using snapshot in Router的更多相关文章

  1. [Angular2 Router] Programmatic Router Navigation via the Router API - Relative And Absolute Router Navigation

    In this tutorial we are going to learn how to navigate programmatically (or imperatively) by using t ...

  2. this.$router.go()和this.$router.push()的差别

    1.this.$router.go(val) => 在history记录中前进或者后退val步,当val为0时刷新当前页面. 2.this.$router.push(path) => 在h ...

  3. 手撸Router,还要啥Router框架?react-router/vue-router躺一边去

    有没有发现,在大家使用React/Vue的时候,总离不开一个小尾巴,到哪都得带着他,那就是react-router/vue-router,而基于它们的第三方框架又出现很多个性化约定和扩展,比如nuxt ...

  4. [Angular2 Router] Use Params from Angular 2 Routes Inside of Components

    Angular 2’s ActivatedRoute allows you to get the details of the current route into your components. ...

  5. [Angular2 Router] Configure Auxiliary Routes in the Angular 2 Router - What is the Difference Towards a Primary Route?

    In this tutorial we are going to learn how we can can configure redirects in the angular 2 router co ...

  6. [Angular2 Router] Auxiliary Routes bit by bit

    Article Github Auxiliary Routes is is little bit hard to understand. Here is demo, link You can see ...

  7. react+redux教程(四)undo、devtools、router

    上节课,我们介绍了一些es6的新语法:react+redux教程(三)reduce().filter().map().some().every()....展开属性 今天我们通过解读redux-undo ...

  8. Node.js -- Router模块中有一个param方法

    这段时间一直有在看Express框架的API,最近刚看到Router,以下是我认为需要注意的地方: Router模块中有一个param方法,刚开始看得有点模糊,官网大概是这么描述的: 1 Map lo ...

  9. ZeroMQ(java)之Router/Dealer模式

    本教程转自:http://blog.csdn.net/kobejayandy/article/details/20163527 在开始之前先把guid里面提到的几个ZeroMQ的特性列一下吧: (1) ...

随机推荐

  1. 句柄(handle)

    < Back 句柄,在windows编程中用来标识: *.模块(module) *.任务(task) *.实例(instance) *.文件(file) *.内存块(block of memor ...

  2. word添加页码

    问:在Word里面,分两栏插入页码,怎么使两栏都有页码? 可以通过插入域来实现分两栏后两栏都有页码.左边一栏页码为 当前页页码×2-1 :右边一栏页码为 当前页页码×2.在页眉页脚视图中,分别在左右两 ...

  3. python 抽象类、抽象方法的实现

    由于python 没有抽象类.接口的概念,所以要实现这种功能得abc.py 这个类库,具体方式如下 from abc import ABCMeta, abstractmethod #抽象类 class ...

  4. 主机找不到vmnet1和vmnet8

    今天跑程序时,突然发现虚拟机ping不通主机了,返过来可行,防火墙什么的都设置好了,仍然不行,后来发现,在网络和共享中心已经看不到vmnet1和vmnet8了,更改适配器设置也只有本地连接和宽带连接, ...

  5. 关于 python 的 @property总结和思考

    其实关于@property我到处去搜了很多教程来看,因为公司大量使用了oop的编程而我以前很少写,所以现在来重新补过来. 从使用上来说 加了@property之后最明显的区别就是 class Stud ...

  6. 解决SQLServer2008 Express远程连接出错的问题[Error: 1326错误]

    sqlserver2008 Express版本默认是只能本机测试连接,不能被其他客户端访问,原因是因为Express版本的数据库被连接默认的TCP/IP监听是被关闭的,我们可以做一些设置实现我们的远程 ...

  7. LDR指令的格式:

    http://blog.csdn.net/tanyouliang/article/details/6767011 LDR指令的格式: LDR{条件}   目的寄存器     <存储器地址> ...

  8. SQLCONNECTION使用HTTP通信协议和中间件连接

    SQLCONNECTION支持TCP/IP和HTTP两种通信协议和中间件连接.一般地,默认情况下使用TCP/IP协议. HTTP 协议的一个非常重要的优势在于穿越防火墙. SQLCONNECTION使 ...

  9. [iOS微博项目 - 3.4] - 获取用户信息

    github: https://github.com/hellovoidworld/HVWWeibo   A.获取用户信息 1.需求 获取用户信息并储存 把用户昵称显示在“首页”界面导航栏的标题上   ...

  10. css样式被覆盖解决方案

    刚才写zenktodo的时候,通过动态添加class的方式修改一个div的样式,总是不起作用. #navigator { height: 100%; width: 200; position: abs ...