首页 > 代码库 > [Angular2 Router] Use Params from Angular 2 Routes Inside of Components
[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. 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
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。