Как получить параметр на маршруте Angular2 в Angular?

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 г.

Как отметили несколько человек, paramMapдоступ к параметрам в должен осуществляться с помощью общего MapAPI:

Чтобы получить снимок параметров, когда вам все равно, что они могут измениться:

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

Чтобы подписаться и получать уведомления об изменениях значений параметров (обычно в результате навигации маршрутизатора)

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

Обновление: август 2017 г.

Начиная с 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'];
        )
    }

Чтобы ознакомиться с документами, включая различия между ними, перейдите по этой ссылке и выполните поиск по запросу « активированный маршрут ».

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');
    });
}

Я предпочитаю использовать и то, и другое, потому что тогда при прямой загрузке страницы я могу получить параметр идентификатора, а также при навигации между связанными объектами подписка будет обновляться должным образом.

Источник в Angular Docs