Làm thế nào để lấy tham số trên tuyến Angular2 theo cách Angular?

Lộ trình

const appRoutes: Routes = [
    { path: '', redirectTo: '/companies/unionbank', pathMatch: 'full'},
    { path: 'companies/:bank', component: BanksComponent },
    { path: '**', redirectTo: '/companies/unionbank' }
]

Thành phần

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' },
        ]
    },
    ...
]

Ví dụ về liên kết: http://localhost:8099/#/companies/bdo

Tôi muốn lấy String bdo trong liên kết ví dụ ở trên.

Tôi biết rằng tôi có thể lấy liên kết bằng cách sử dụng window.location.href và chia thành mảng. Vì vậy, tôi có thể lấy tham số cuối cùng nhưng tôi muốn biết liệu có phương pháp thích hợp để thực hiện điều này theo cách góc cạnh hay không.

Bất kỳ trợ giúp sẽ được đánh giá cao. Cảm ơn

Cập nhật: Tháng 9 năm 2019

Như một số người đã đề cập, các tham số trong paramMapphải được truy cập bằng cách sử dụng MapAPI chung :

Để có ảnh chụp nhanh các thông số, khi bạn không quan tâm rằng chúng có thể thay đổi:

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

Để đăng ký và được cảnh báo về những thay đổi trong giá trị tham số (thường là do điều hướng của bộ định tuyến)

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

Cập nhật: Tháng 8 năm 2017

Kể từ Angular 4, paramsđã không còn được dùng nữa để chuyển sang giao diện mới paramMap. Mã cho vấn đề ở trên sẽ hoạt động nếu bạn chỉ cần thay thế một mã này cho mã kia.

Câu trả lời gốc

Nếu bạn đưa ActivatedRoutevào thành phần của mình, bạn sẽ có thể trích xuất các thông số tuyến đường

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

Nếu bạn mong đợi người dùng điều hướng trực tiếp từ ngân hàng này sang ngân hàng khác mà không điều hướng đến một thành phần khác trước tiên, bạn phải truy cập vào thông số thông qua:

    ngOnInit(){
        this.route.params.subscribe( params =>
            this.bankName = params['bank'];
        )
    }

Đối với các tài liệu, bao gồm cả sự khác biệt giữa hai tài liệu, hãy xem liên kết này và tìm kiếm " enableroute "

Đối với Angular 6+, điều này được xử lý hơi khác so với các phiên bản trước. Như @BeetleJuice đã đề cập trong câu trả lời ở trên , paramMaplà giao diện mới để nhận thông số tuyến, nhưng việc thực thi có một chút khác biệt trong các phiên bản Angular mới hơn. Giả sử điều này nằm trong một thành phần:

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

Tôi thích sử dụng cả hai hơn vì sau đó khi tải trang trực tiếp, tôi có thể nhận được thông số ID và cũng như nếu điều hướng giữa các thực thể liên quan, đăng ký sẽ cập nhật đúng cách.

Nguồn trong Angular Docs