路线
const appRoutes: Routes = [
{ path: '', redirectTo: '/companies/unionbank', pathMatch: 'full'},
{ path: 'companies/:bank', component: BanksComponent },
{ path: '**', redirectTo: '/companies/unionbank' }
]
组件
const NAVBAR = [
{
name: 'Banks',
submenu: [
{ routelink: '/companies/unionbank', name: 'Union Bank' },
{ routelink: '/companies/metrobank', name: 'Metro Bank' },
{ routelink: '/companies/bdo', name: 'BDO' },
{ routelink: '/companies/chinabank', name: 'China Bank' },
]
},
...
]
链接示例:http://localhost:8099/#/companies/bdo
我想在上面的示例链接中获取 String
bdo。
我知道我可以通过使用 window.location.href 获取链接并将其拆分为数组。所以,我可以获得最后一个参数,但我想知道是否有合适的方法以 Angular 方式执行此操作。
如有任何帮助,我们将不胜感激。谢谢
最佳答案
更新:2019 年 9 月
正如一些人提到的,paramMap
中的参数应该使用通用的 Map
API 访问:
要获取参数的快照,当您不关心它们可能会更改时:
this.bankName = this.route.snapshot.paramMap.get('bank');
订阅并提醒参数值的变化(通常是路由器导航的结果)
this.route.paramMap.subscribe( paramMap => {
this.bankName = paramMap.get('bank');
})
更新:2017 年 8 月
自 Angular 4 以来,params
已被弃用,取而代之的是新接口(interface) paramMap
.如果您简单地用一个替换另一个,上述问题的代码应该可以工作。
原始答案
如果您在组件中注入(inject) 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'];
)
}
对于文档,包括两者之间的差异check out this link并搜索“activatedroute”
关于angular - 如何以 Angular 方式获取 Angular2 路由上的参数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40275862/