Angular2 경로에서 Angular2 경로의 매개 변수를 가져오는 방법은 무엇입니까?

Angular2 경로에서 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월

4 로, 앵러귤 4 후로이.params새 인터페이스를 위해 더 이상 사용되지 않습니다.위의 문제에 대한 코드는 단순히 하나를 다른 하나로 대체하는 경우에 작동합니다.

원답

▁▁if▁inject사.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'];
        )
    }

두 문서의 차이점을 포함하여 이 링크를 확인하고 "활성화된 경로"를 검색합니다.

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

직접 페이지 로드 시 ID 매개 변수를 가져올 수 있고 관련 엔티티 간을 탐색하면 구독이 제대로 업데이트되기 때문에 둘 다 사용하는 것을 선호합니다.

Angular Docs의 소스

이 항목은 이미 꽤 오래되었지만 여전히 검색 엔진 결과의 상위에 있습니다.저는 여기서 보여준 방법들이 이미 효과가 있다고 확신합니다.하지만 그들 중 일부는 구식이거나 불완전합니다.이것은 여러분에게 도움이 될 수 있는 최신의 완전한 예입니다.매개 변수 수신 구성 요소를 PersonComponent라고 부릅니다.첫 번째 부분은 app.module.ts(app-routing.module.ts)에 정의된 경로입니다.

const routes: Routes = [
{path: "/", component: HomeComponent}, 
{path: "person/name/:personName", component: PersonComponent}];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule {
}

사용자 구성요소 경로에 있는 :personName에 주목하십시오. 이것이 원하는 대로 호출할 수 있는 키입니다.다음으로 다른 구성 요소(또는 동일한 구성 요소)의 HTML 부분에서 이 경로를 사용합니다.

<a routerLink="person/name/Mario">This is Mario</a>
<a routerLink="person/name/Luigi">This is Luigi</a>
<a routerLink="person/name/Bowser">This is Bowser</a>

여기서 :personName은 실제 이름으로 대체됩니다.마지막으로 사용자 구성요소에서 이 매개변수를 읽습니다.

import {ActivatedRoute} from "@angular/router";

@Component({
  selector: 'app-person',
  templateUrl: './person.component.html',
  styleUrls: ['./person.component.scss']
})
export class PersonComponent {

  constructor(route: ActivatedRoute) {
    const name = route.snapshot.paramMap.get('personName');
    console.log(name)
    //do whatever you want with it
  }
}

paramMap에서 값을 가져오기 위해 Routes의 :personName이 키로 사용되는 것을 확인할 수 있습니다.

경로 매개 변수 가져오기를 시도할 수 있습니다.

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-hero',
  templateUrl: './hero.component.html',
  styleUrls: ['./hero.component.css']
})
export class HeroComponent implements OnInit {

  constructor(private activeRoute: ActivatedRoute) { 
    this.activeRoute.queryParams.subscribe((qp) => {
      console.log('Get Router Params:', this.activeRoute.snapshot.params.bank);
    });
  }

  ngOnInit(): void {
  }

}

경로 URL에 대한 자세한 내용은 여기에서 확인할 수 있습니다.

paramMap을 사용하는 대신 RouteResolver를 사용할 수도 있습니다. 약간 오버킬이 될 수 있고 탐색 프로세스 중에 데이터를 가져오는 데 주로 사용됩니다.

설정 확인기

import { Injectable } from '@angular/core';
import { Resolve } from '@angular/router';

import { Observable, of } from 'rxjs';
import { delay } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class LastUrlPathResolver implements Resolve<Observable<string>> {

  constructor(activatedRouteSnapshot: ActivatedRouteSnapshot){}

  resolve(): Observable<string> {
    return activatedRouteSnapshot.url[activatedRouteSnapshot.url.length-1]
  }
}

항로를 설정

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { NewsResolver } from './news.resolver';

import { TopComponent } from './top/top.component';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    component: HomeComponent
  },
  {
    path: 'top',
    component: TopComponent,
    resolve: { message: LastUrlPathResolver }
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

처럼 사용합니다.

import { Component, OnInit } from '@angular/core';

import { ActivatedRoute } from '@angular/router';

@Component({ ... })
export class TopComponent implements OnInit {
  data: any;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.data = this.route.snapshot.data;
  }
}

여기서 더 찾기 https://www.digitalocean.com/community/tutorials/angular-route-resolvers

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