Angular 2’s ActivatedRoute allows you to get the details of the current route into your components. Params on the ActivatedRoute are provided as streams, so you can easily map the param you want off of the stream and display it in your template.

For example we have a HerosComonent, and inside HerosComponent, we will have multi HeroComponent:

heros.component.html:

<ul>
<li>
<a [routerLink]="'1'"
routerLinkActive="active"
[routerLinkActiveOptions]="{exact: true}">Hero 1</a>
</li>
</ul>

heros.routers.ts:

import {HerosComponent} from "./heros.component";
import {RouterModule} from "@angular/router";
import {HeroComponent} from "./hero/hero.component";
const routes = [
{path: '', component: HerosComponent},
{path: ':id', component: HeroComponent},
];
export default RouterModule.forChild(routes)

hero.component.ts:

import { Component, OnInit } from '@angular/core';
import {ActivatedRoute} from "@angular/router"; @Component({
selector: 'app-hero',
templateUrl: 'hero.component.html',
styleUrls: ['hero.component.css']
})
export class HeroComponent implements OnInit { id;
constructor(private router: ActivatedRoute) {
this.id = router.params.map((p:any) => p.id);
} ngOnInit() {
} }

Github

[Angular2 Router] Use Params from Angular 2 Routes Inside of Components的更多相关文章

  1. [Angular2 Router] Style the Active Angular 2 Navigation Element with routerLinkActive

    You can easily show the user which route they are on using Angular 2’s routerLinkActive. Whenever a ...

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

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

  4. [Angular2 Router] Build Angular 2 Navigation with routerLink

    Angular 2 navigation is configured using the routerLink directive. The routerLink directive behaves ...

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

  6. [Angular2 Router] Index router

    Index router as default router. import {RouterModule} from "@angular/router"; import {NotF ...

  7. [Angular2 Router] Using snapshot in Router

    In the application, we have heros list, when click each hero, will redirect to hero detail view. Tha ...

  8. [Angular2 Router] Setup page title with Router events

    Article import 'rxjs/add/operator/filter'; import 'rxjs/add/operator/map'; import 'rxjs/add/operator ...

  9. vue router & query params

    vue router & query params vue router get params from url https://zzk.cnblogs.com/my/s/blogpost-p ...

随机推荐

  1. Sunrise Release Version History

    Sunrise Release Version History 1.4.1.0 1.1.0.0 1.0.1.0

  2. 把一个序列转换成非严格递增序列的最小花费 POJ 3666

    //把一个序列转换成非严格递增序列的最小花费 POJ 3666 //dp[i][j]:把第i个数转成第j小的数,最小花费 #include <iostream> #include < ...

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

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

  4. 详解WPF Blend工具中的复合路径功能 ( 含路径标记语法 )

    写此文章的目的是为了简单分析一下 Blend工具中提供的"复合路径"功能.有人在我的博文中留言问我复合路径的问题.  稍微琢磨一下,觉得应该是对的.因此贴出来和大家分享.有不对的说 ...

  5. Bubble Sort

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  6. SCAU 10678 神奇的异或

    10678 神奇的异或 时间限制:1000MS  内存限制:65535K 题型: 编程题   语言: 无限制 Description 在现在这个信息时代,数据是很重要的东西哦~ 很多时候,一条关键的数 ...

  7. gradle gradlew 的使用

    jcenter() 仓库比 mavenCentral() 仓库快,因此最好将jcenter 放前面,这样下载速度最快. 使用本地软件仓库:repositories { flatDir { dirs ' ...

  8. openstack kilo 流量

  9. 第三百三十天 how can I 坚持

    今天是姥姥二周年,不是忘了,是根本就没不知道,没放在心上,正月十九,记下了,人这一辈子. 搞不懂,搞不懂那签. 锥地求泉,先难后易,顺其自然,偶遇知己,携手同行,是签文的关键,我逐个解释给你听.锥地求 ...

  10. TDBXCommand TDBXReader

    TDBXCommand  *cmd; cmd= FDBXConnection->CreateCommand(); cmd->CommandType=TDBXCommandTypes_DSS ...