Wie erhalte ich Parameter auf Angular2-Route auf Angular-Weise?

86

Route

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

Komponente

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

Beispiel für einen Link: http://localhost:8099/#/companies/bdo

Ich möchte String bdo im obigen Beispiellink erhalten.

Mir ist bewusst, dass ich den Link mithilfe von window.location.href abrufen und in ein Array aufteilen kann. Ich kann also den letzten Parameter abrufen, möchte aber wissen, ob es eine geeignete Methode gibt, um dies auf eckige Weise zu tun.

Jede Hilfe wäre dankbar. Vielen Dank

Nordlichter
quelle

Antworten:

202

Update: Sep 2019

Wie einige Leute erwähnt haben, sollte auf die Parameter in paramMapüber die gemeinsame MapAPI zugegriffen werden :

So erhalten Sie eine Momentaufnahme der Parameter, wenn Sie sich nicht darum kümmern, dass sie sich ändern:

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

Abonnieren und über Änderungen der Parameterwerte informiert werden (normalerweise aufgrund der Navigation des Routers)

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

Update: August 2017

Seit Angular 4 paramssind zugunsten der neuen Schnittstelle veraltet paramMap. Der Code für das obige Problem sollte funktionieren, wenn Sie einfach den anderen ersetzen.

Ursprüngliche Antwort

Wenn Sie ActivatedRouteIhre Komponente einfügen, können Sie die Routenparameter extrahieren

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

Wenn Sie erwarten, dass Benutzer direkt von Bank zu Bank navigieren, ohne zuvor zu einer anderen Komponente zu navigieren, sollten Sie über eine beobachtbare Datei auf den Parameter zugreifen:

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

Für die Dokumente, einschließlich der Unterschiede zwischen den beiden, überprüfen Sie diesen Link und suchen Sie nach " enabledroute "

BeetleJuice
quelle
Gibt es eine Einschränkung, bei der Komponenten, die in einen Router-Ausgang einer übergeordneten Komponente geladen werden, unterschiedliche ActiveRoute-Parameter sehen? - Ich bin auf einen Fall gestoßen, in dem das übergeordnete Element einen Parameter sieht, die enthaltenen Komponenten jedoch nicht denselben Parameter sehen ...
Neoheurist
Es hat bei mir nicht funktioniert, weil ich ActivatedRoute als Anbieter für meine Komponente hinzugefügt habe. Stellen Sie also sicher, dass Sie das nicht tun! Es funktioniert wie ein Zauber mit eckigen 4.2.4.
Thomas Webber
1
Für paramMapsollten Sie params.get('bank')stattdessen verwenden.
Zurfyx
Was ist der Unterschied zwischen this.route.snapshot.paramMap.get('bank');und this.route.snapshot.params.bank;?
Gil Epshtain
22

Ab Angular 6+ wird dies etwas anders gehandhabt als in früheren Versionen. Wie @BeetleJuice in der obigen Antwort erwähnt , paramMaphandelt es sich um eine neue Schnittstelle zum Abrufen von Routenparametern, die Ausführung ist jedoch in neueren Versionen von Angular etwas anders. Angenommen, dies ist in einer Komponente enthalten:

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

Ich bevorzuge es, beide zu verwenden, da ich dann beim direkten Laden der Seite den ID-Parameter erhalten kann und auch beim Navigieren zwischen verwandten Entitäten das Abonnement ordnungsgemäß aktualisiert wird.

Quelle in Angular Docs

KMJungersen
quelle
1
Warum wäre switchMaphier erforderlich? Wird das Abonnement nicht auch beim direkten Laden der Seite aufgerufen?
Crush
4
@crush Aus den oben verlinkten Dokumenten: "Sie könnten denken, den RxJS- mapOperator zu verwenden. Aber das HeroServicegibt ein zurück Observable<Hero>. Sie reduzieren also das Observable switchMapstattdessen mit dem Operator. Der switchMapOperator bricht auch frühere Anfragen während des Flugs ab. Wenn der Benutzer erneut zu navigiert Diese Route mit einer neuen, idwährend die HeroServicealte noch abgerufen wird id, switchMapverwirft diese alte Anfrage und gibt den Helden für die neue zurück id. "
KMJungersen