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

Github

[Angular2 Router] Optional Route Query Parameters - The queryParams Directive and the Query Parameters Observable的更多相关文章

  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. [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 ...

  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. $router和$route的区别,路由跳转方式name 、 path 和传参方式params 、query的区别

    一.$router和$route的区别 $router : 是路由操作对象,只写对象$route : 路由信息对象,只读对象 例子://$router操作 路由跳转 this.$router.push ...

  5. [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 ...

  6. Vue中美元$符号的意思与vue2.0中的$router 和 $route的区别

    vue的实例属性和方法 除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法.它们都有前缀 $,以便与用户定义的属性区分开来.例如: var data = { a: 1 } var vm = n ...

  7. 浅谈vue$router 和 $route的区别

    最近在学习vue的单页面应用开发,需要vue全家桶,其中用到了VueRouter,在路由的设置和跳转中遇到了两个对象$router 和 $route ,有些傻傻分不清,后来自己结合网上的博客和自己本地 ...

  8. vue中的$router 和 $route的区别

    最近在学习vue的单页面应用开发,需要vue全家桶,其中用到了VueRouter,在路由的设置和跳转中遇到了两个对象$router 和 $route ,有些傻傻分不清,后来自己结合网上的博客和自己本地 ...

  9. 初识$router和$route

    初识\(router和\)route 一.前言 ​ vue框架中单页面富应用可以说是其最大的优点功能之一了,应用起来简单直观,说起单页面富应用那就必须得联想到\(router**,但是在项目开发过程中 ...

随机推荐

  1. SQLite数据库和JPA简单介绍

    SQLite数据库和JPA简单介绍 一.SQLite简单使用 SQLite是遵循ACID的关系数据库管理系统,它的处理速度很快,它的设计目标是嵌入式的,只需要几百K的内存就可以了. 1.下载SQLit ...

  2. python在linux上的GUI无法弹出界面

    在进行python写GUI程序的时候,使用Tkinter,发现无法执行程序,报错如下: X connection to localhost:10.0 broken(explicit kill or s ...

  3. Spring Boot 学习笔记 - 认识Spring Boot框架

    因各种原因,.NET前端工程师重新接触JAVA,真是向全栈的路上又迈出了无奈的一步. 下面正文: Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初 ...

  4. 【IDE】SharpDevelop

    SharpDevelop 这个轻型的开发工具支持多种程序语言,包括C#.java以及VB.NET,同时还支持多种语言界面,象任何爱好者开发的工具一样.这个编辑器的界面风格类似于Office XP以及V ...

  5. phpcms学习总结

    文件目录结构 根目录 | – api 接口文件目录 | – caches 缓存文件目录 | – configs 系统配置文件目录 | – caches_* 系统缓存目录 | – phpcms phpc ...

  6. hadoop2.6.0 --- 64位源代码

    今天有朋友在群里找hadoop最新的2.6.0的源代码,其实这个源代码在hadoop的官方网站是有下载的(应该是32位的),还有一个src,不过给的是maven版本,需要自己在机器上编译一下(我的机器 ...

  7. 在Spring MVC中使用注解的方式校验RequestParams

    概述   Spring MVC支持Bean Validation,通过这个验证技术,可以通过注解方式,很方便的对输入参数进行验证,之前使用的校验方式,都是基于Bean对象的,但是在@RequestPa ...

  8. Innodb中的事务隔离级别和锁的关系(转)

    原文:http://tech.meituan.com/innodb-lock.html 前言: 我们都知道事务的几种性质,数据库为了维护这些性质,尤其是一致性和隔离性,一般使用加锁这种方式.同时数据库 ...

  9. 主题敏感词PageRank

    [主题敏感词PageRank] PageRank忽略了主题相关性,导致结果的相关性和主题性降低,对于不同的用户,甚至有很大的差别.例如,当搜索“苹果”时,一个数码爱好者可能是想要看 iphone 的信 ...

  10. ucos创建任务的一般方法

    一般说来,任务可在OSStart()启动任务调度之前来创建,也可在任务中创建,但是UC/OS有个规定:在调用OSStart()启动任务调度之前,必须创建了至少一个任务.因此一般习惯上,在OSStart ...