Як отримати параметр на маршруті Angular2 Angular способом?

Маршрут

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 і розділити його на масив. Отже, я можу отримати останній параметр, але я хочу знати, чи є правильний метод робити це кутовим способом.

Будь-яка допомога буде вдячна. Дякую

Оновлення: вересень 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'];
        )
    }

Для документів, включаючи різницю між ними, перегляньте це посилання та знайдіть " activroute "

Що стосується 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