如何以Angular方式在Angular2路线上获取参数？

Question 1

路线

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并将其拆分为数组。因此，我可以获得最后一个参数，但我想知道是否有适当的方法以角度方式执行此操作。

任何帮助，将不胜感激。谢谢

Question 2

更新：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不推荐使用新接口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'];
        )
    }

对于文档，包括两者之间的区别，请查看此链接并搜索“ activatedroute ”

Question 3

从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中的源代码