Angular 방식으로 Angular2 경로에서 매개 변수를 얻는 방법은 무엇입니까?

Angular 방식으로 Angular2 경로에서 매개 변수를 얻는 방법은 무엇입니까?

---

노선

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 년 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 "를 검색하십시오.

---

As of Angular 6+, this is handled slightly differently than in previous versions. As @BeetleJuice mentions in the answer above, paramMap is new interface for getting route params, but the execution is a bit different in more recent versions of Angular. Assuming this is in a component:

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

I prefer to use both because then on direct page load I can get the ID param, and also if navigating between related entities the subscription will update properly.

Source in Angular Docs

참고URL : https://stackoverflow.com/questions/40275862/how-to-get-parameter-on-angular2-route-in-angular-way