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. OpenCV安装要点

    OpenCV安装要点1.设置系统和用户环境变量PATH指向opencv\build\x86\vc10\bin或者opencv\build\x64\vc10\bin2.新建用户环境变量OpenCV指向o ...

  2. SublimeText3 初探(工欲善其事,必先利其器)

    告别2015,迎来了2016.祝看到这篇博客的兄弟们都猴年发财,人生走上另一个高度. 新年新气象,猴年我会常常来更新自己的博客,希望能接触到更多的园友. sublime text3 和atom 各有各 ...

  3. CSS中animate属性

    我记得,在工作中直接使用animation,只要能做出动画就完了,根本没有看每一个细节. 其实,这样做对于我们来说,的确没有错,因为工作中没有时间给你看每一个细节,大致看一篇就没下文了. 当我们想要好 ...

  4. 设计模式 单件-Singleton

    单件模式 Singleton 什么时候使用?当需要独一无二的对象时,请想起他. 举例:线程池(threadpool),缓存(cache),对话框,处理偏好设置和注册表(registry)的对象,驱动程 ...

  5. SpringMVC + Spring + MyBatis 学习笔记:提交数据遭遇基础类型和日期类型报400错误解决方法

    系统:WIN8.1 数据库:Oracle 11GR2 开发工具:MyEclipse 8.6 框架:Spring3.2.9.SpringMVC3.2.9.MyBatis3.2.8 使用SpringMVC ...

  6. js 生成随机数

    <script>   function GetRandomNum(Min,Max){   var Range = Max - Min;   var Rand = Math.random() ...

  7. HDU 4610 Cards (合数分解,枚举)

    Cards Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  8. spring mvc为何多注入了个SimpleUrlHandlerMapping?

    最近在调试项目时,debug DispatcherServlet时,发现handlerMappings属性包含了RequestMappingHandlerMapping.SimpleUrlHandle ...

  9. CCF 201312-1 出现次数最多的数 (水题)

    问题描述 给定n个正整数,找出它们中出现次数最多的数.如果这样的数有多个,请输出其中最小的一个. 输入格式 输入的第一行只有一个正整数n(1 ≤ n ≤ 1000),表示数字的个数. 输入的第二行有n ...

  10. PB学习笔记(一)

    前言:我绝对很痛恨PB.1.没人带2.自己摸索3.头发掉了4.老大不停的给任务5.这语言老的不行了6,代码可读性不是一般的差 我绝对很喜欢PB.1.自我学习成功后那种成就感2.老大也会帮给我看看,指点 ...