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. python中函数的总结之三

    1. 可变长参数 在函数中可变长参数分为两种:一种是非关键字参数,表示为元组:一种是关键字参数,表示为字典. 具体看下面的例子代码,相当于单元测试: #!/usr/bin/env python #'t ...

  2. jsp页面元素和内置对象

    java server pages其根本是一个简化的servlet设计.实现了在java当中使用html标签.javaEE标准 一.页面元素 1.静态内容 html.js.css相关标签元素. 2.指 ...

  3. 50+ 响应式的Prestashop电商主题

    PrestaShop是一款针对web2.0设计的全功能.跨平台的免费开源电子商务解决方案,自08年1.0版本发布,短短两年时间,发展迅速,全球已超过四万家网店采用Prestashop进行部署.Pres ...

  4. XML转换为Map通用算法实现 Java版本(Stax实现)

    目前项目中需要将XML转换为Map,下面给出了自己的代码实现. 后续将为大家提供Dom版本的实现. 请各路大神给予各种优良实现. 场景: 在项目中需要解析XML文本字符串,需要将XML文本字符串映射为 ...

  5. Hadoop的分布模式安装

      1.确定集群的结构 IP(主机名) 角色 192.168.1.220(hadoop0) NameNode.JobTracker 192.168.1.221(hadoop1) SecondaryNa ...

  6. RHAS Linux下架构Lotus Domino详解(附视频)

    此处下载操作视频:RHAS Linux下架构Lotus Domino 6.5视频教程      在rhas下架构Lotus Domino 汉化 650) this.width=650;" o ...

  7. 动软代码生成与 EntityFramework 实体生成模板

    有用到EntityFrameWork的同学们,可以用用. 实体工程中添加EF6的dll 还有 ValidBox4Mvc.ValidRules.dll应用到项目中,此dll下载地址:http://www ...

  8. JNLP + Applet + Bouncy Castle

    http://stackoverflow.com/questions/4275005/jnlp-applet-bouncy-castle ——————————————————————————————— ...

  9. OpenGL复习要点

    [OpenGL要点复习] 1.和像素有关的信息(例如像素的颜色)组织成位平面 (bitplane)的形式,位平面又可以组织成帧缓冲区(framebuffer)的形式.位平面是一块内存区域,保存了屏幕上 ...

  10. hdu 1176 免费馅饼(数塔类型)

    http://acm.hdu.edu.cn/showproblem.php?pid=1176 免费馅饼 Time Limit: 2000/1000 MS (Java/Others)    Memory ...