angular - 如何以 Angular 方式获取 Angular2 路由上的参数？

Question

路线

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 方式执行此操作。

如有任何帮助，我们将不胜感激。谢谢

Answer 1

更新:2019 年 9 月

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

要获取参数的快照，当您不关心它们可能会更改时:

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”