[Angular2 Router] Optional Route Query Parameters - The queryParams Directive and the Query Parameters Observable
In this tutorial we are going to learn how to use the Angular 2 router to pass optional query parameters from one route into another route. There are couple of ways of doing this from the source route perspective: we use the queryParams property in the navigate API call, or we can use the queryParams directive.
On the receiving side, and especially in the case of detail child routes where we want to navigate from one detail into the other, we are going to see how to use the queryParams observable to receive the navigation query parameters.
First way, using in html:
<a [routerLink]="hero.id"
routerLinkActive="active"
[queryParams]="{description: 'Starwar Hero '}"
[routerLinkActiveOptions]="{exact: true}">{{hero.name}}</a>
Second way, using in JS:
getHeroByIndex(i){
// this.router.navigateByUrl(`/heros/${i}`);
// this.router.navigate(['heros', i]);
this.router.navigate([i], {
relativeTo: this.route,
queryParams: {
description: 'Star war Hero'
}
})
}
Read the query param:
export class HeroComponent implements OnInit {
hero: Observable<any>;
description: string;
constructor(private router: ActivatedRoute,
private starwarService: StarWarsService) {
}
ngOnInit() {
/* this.hero = this.router.params
.map((p:any) => p.id)
.switchMap( id => this.starwarService.getPersonDetail(id));
*/
// since herocomponent get init everytime, it would be better to use snapshot for proferemence
const heroId = this.router.snapshot.params['id'];
this.hero = this.starwarService.getPersonDetail(heroId);
this.router.queryParams.subscribe(
param => this.description = param['description']
)
}
}
In url, it looks like:
http://localhost:4200/heros/4?description=Starwar%20Hero%20
[Angular2 Router] Optional Route Query Parameters - The queryParams Directive and the Query Parameters Observable的更多相关文章
- [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 ...
- [Angular2 Router] CanActivate Route Guard - An Example of An Asynchronous Route Guard
In this tutorial we are going to learn how we can to configure an can activate route guard in the An ...
- [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 ...
- $router和$route的区别,路由跳转方式name 、 path 和传参方式params 、query的区别
一.$router和$route的区别 $router : 是路由操作对象,只写对象$route : 路由信息对象,只读对象 例子://$router操作 路由跳转 this.$router.push ...
- [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 ...
- Vue中美元$符号的意思与vue2.0中的$router 和 $route的区别
vue的实例属性和方法 除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法.它们都有前缀 $,以便与用户定义的属性区分开来.例如: var data = { a: 1 } var vm = n ...
- 浅谈vue$router 和 $route的区别
最近在学习vue的单页面应用开发,需要vue全家桶,其中用到了VueRouter,在路由的设置和跳转中遇到了两个对象$router 和 $route ,有些傻傻分不清,后来自己结合网上的博客和自己本地 ...
- vue中的$router 和 $route的区别
最近在学习vue的单页面应用开发,需要vue全家桶,其中用到了VueRouter,在路由的设置和跳转中遇到了两个对象$router 和 $route ,有些傻傻分不清,后来自己结合网上的博客和自己本地 ...
- 初识$router和$route
初识\(router和\)route 一.前言 vue框架中单页面富应用可以说是其最大的优点功能之一了,应用起来简单直观,说起单页面富应用那就必须得联想到\(router**,但是在项目开发过程中 ...
随机推荐
- cocos2dx 内存管理的理解
关于引擎内存管理的细节,网上有大量的详解,这里概括一下: cocos2d-x 的世界是基于 CCObject 类构建的,所以内存管理的本质就是管理一个个 CCObject. //CCObject 内部 ...
- 桶排序-C-结构体排序
struct TS { int index; ]; }; ] = {{,,,,,"s8"}}; ]; int i; int length = sizeof(a) / sizeof ...
- How to run a terminal inside of vim?
[How to run a terminal inside of vim?] :sh turn vim into shell mode d+trl back to vim 参考:http://stac ...
- C#读取文件为byte数组
private byte[] FileContent(string fileName) { using (FileStream fs = new FileStream(fileName, FileMo ...
- ubuntu官方源列表网址
http://wiki.ubuntu.org.cn/%E6%BA%90%E5%88%97%E8%A1%A8 (推荐台湾的源)
- class str
class str(object): """ str(object='') -> str str(bytes_or_buffer[, encoding[, erro ...
- GC: CMS垃圾回收器一(英文版)
Memory Management in the Java HotSpot™ Virtual Machine Concurrent Mark-Sweep (CMS) Collector For man ...
- A - Oulipo
A - Oulipo Time Limit:1000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I64u Submit S ...
- 规范打log
在公司工作快3年了,debug用的最多的还是分析程序打出来的log. 怎样打log,打什么样的log,也是很值得研究的事情.好的打log方式,能够很快的分析和解决问题. 下面总结两点: 1.在log中 ...
- leetcode:Path Sum (路径之和) 【面试算法题】
题目: Given a binary tree and a sum, determine if the tree has a root-to-leaf path such that adding up ...