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경로 PARAMS을 얻기를위한 새로운 인터페이스가 있지만 실행은 각도의 최신 버전에서 조금 다릅니다. 이것이 구성 요소에 있다고 가정합니다.

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의 소스