How to get parameter on Angular2 route in Angular way?

更新: 2019年9月

正如一些人所提到的，应该使用通用的 MapAPI 访问 paramMap中的参数:

要获得 params 的快照，当你不在乎它们可能发生变化的时候:

this.bankName = this.route.snapshot.paramMap.get('bank');

订阅并警告参数值的更改(通常是路由器导航的结果)

this.route.paramMap.subscribe( paramMap => {
this.bankName = paramMap.get('bank');
})

更新: 2017年8月

自从角度4以来，params已经被废弃了，取而代之的是新的接口 paramMap。如果您只是用一个代替另一个，那么上述问题的代码应该可以工作。

原始答案

如果在组件中注入 ActivatedRoute，就可以提取路由参数

    import {ActivatedRoute} from '@angular/router';
...
    

constructor(private route:ActivatedRoute){}
bankName:string;
    

ngOnInit(){
// 'bank' is the name of the route parameter
this.bankName = this.route.snapshot.params['bank'];
}

如果您希望用户直接从一个银行导航到另一个银行，而不是先导航到另一个组件，那么您应该通过一个可观察的:

    ngOnInit(){
this.route.params.subscribe( params =>
this.bankName = params['bank'];
)
}

对于文件，包括两个 看看这个链接之间的差异和搜索“ 激活路线”

在 Angular 6 + 中，这个处理方式与以前的版本略有不同。正如@BeetleJuice 在 上面的回答中提到的，paramMap是获取路由参数的新接口，但是在最新版本的 Angular 中执行有点不同。假设这是在一个组件中:

private _entityId: number;


constructor(private _route: ActivatedRoute) {
// ...
}


ngOnInit() {
// For a static snapshot of the route...
this._entityId = this._route.snapshot.paramMap.get('id');


// For subscribing to the observable paramMap...
this._route.paramMap.pipe(
switchMap((params: ParamMap) => this._entityId = params.get('id'))
);


// Or as an alternative, with slightly different execution...
this._route.paramMap.subscribe((params: ParamMap) =>  {
this._entityId = params.get('id');
});
}

我更喜欢同时使用这两种方法，因为这样在直接页面加载时我可以获得 ID 参数，而且如果在相关实体之间导航，订阅将正确地更新。

来源: Angular Docs

您可以尝试使用这个函数来获取路由参数:

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 {


constructor(private activeRoute: ActivatedRoute) {
this.activeRoute.queryParams.subscribe((qp) => {
console.log('Get Router Params:', this.activeRoute.snapshot.params.bank);
});
}


ngOnInit(): void {
}


}

您可以查看路线 URL 给你的更多细节

与使用 paramMap 不同的是，你也可以使用一个 RouteResolver，尽管这可能有点夸张，通常用于在导航过程中获取数据..。

安装解析器

import { Injectable } from '@angular/core';
import { Resolve } from '@angular/router';


import { Observable, of } from 'rxjs';
import { delay } from 'rxjs/operators';


@Injectable({
providedIn: 'root'
})
export class LastUrlPathResolver implements Resolve<Observable<string>> {


constructor(activatedRouteSnapshot: ActivatedRouteSnapshot){}


resolve(): Observable<string> {
return activatedRouteSnapshot.url[activatedRouteSnapshot.url.length-1]
}
}

设定路线

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';


import { NewsResolver } from './news.resolver';


import { TopComponent } from './top/top.component';
import { HomeComponent } from './home/home.component';


const routes: Routes = [
{
path: '',
pathMatch: 'full',
component: HomeComponent
},
{
path: 'top',
component: TopComponent,
resolve: { message: LastUrlPathResolver }
}
];


@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

就像

import { Component, OnInit } from '@angular/core';


import { ActivatedRoute } from '@angular/router';


@Component({ ... })
export class TopComponent implements OnInit {
data: any;


constructor(private route: ActivatedRoute) {}


ngOnInit(): void {
this.data = this.route.snapshot.data;
}
}

在这里找到更多 Https://www.digitalocean.com/community/tutorials/angular-route-resolvers

这个话题已经很老了，但还是在我的搜索引擎结果上。我很确定这里展示的方法已经奏效了。但其中有些已经过时或不完整。这是一个最新的完整例子，希望对你有所帮助。我调用参数接收组件 人员组成部分。第一部分是您的 路线最有可能定义在 应用程序模块(应用程序路由。模组) :

const routes: Routes = [
{path: "/", component: HomeComponent},
{path: "person/name/:personName", component: PersonComponent}];


@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {
}

请注意人员组件路径中的 翻译: PersonName，这是我们要寻找的关键，您可以随意调用它。接下来在另一个(或相同)组件的 HTML 部分中使用此路由:

<a routerLink="person/name/Mario">This is Mario</a>
<a routerLink="person/name/Luigi">This is Luigi</a>
<a routerLink="person/name/Bowser">This is Bowser</a>

Here the :personName is replaced with actual names. Last one is reading this parameter in the 人员组成部分

import {ActivatedRoute} from "@angular/router";


@Component({
selector: 'app-person',
templateUrl: './person.component.html',
styleUrls: ['./person.component.scss']
})
export class PersonComponent {


constructor(route: ActivatedRoute) {
const name = route.snapshot.paramMap.get('personName');
console.log(name)
//do whatever you want with it
}
}

您可以看到来自 路线的 翻译: PersonName被用作键，从 Parmmap获取值。