web-dev-qa-db-fra.com

Angular 2 - Passer les paramètres à Route

J'ai un <a> tag comme ci-dessous,

<a [routerLink]="[/Person']">Person</a>

Je veux donc passer le person.id pour ça /Person routeur. Comment puis-je le passer et le gérer @RouteConfig comme params dans Angular 1

angularangular-ui-router
16
DilumN

Passer au lien du routeur:

<a [routerLink]="['/Person', person.id]">Person</a>

Poignée dans le composant:

this.route.params.subscribe(
   (params: Params) => {
      this.id = params['id']; 
   }
);

Deuxième voie: 

this.route.params.forEach(
   (params: Params) => {
       this.id = params['id'];
   }
);

Dans cet exemple, vous devez injecter ActivatedRoute ( par exemple comme propriété de route ) comme ça:

constructor(private route: ActivatedRoute) {}

Si vous vous abonnez - il est important de vous désinscrire Observable pour éviter fuites de mémoire.

Exemple complet:

export class SimpleComponent implements OnInit, OnDestroy {
    private id: number;
    private route$: Subscription;
    constructor(private route: ActivatedRoute) {}

    ngOnInit() {
        this.route$ = this.route.params.subscribe(
            (params: Params) => {
                this.id = +params['id']; // cast to number
            }
        );
    }
    ngOnDestroy() {
        if (this.route$) this.route$.unsubscribe();
    }
}

Config:

export const routes = [
    ...
    { path : 'Person/:id', component : ...},
    ...
];

Également, @RouteConfig est obsolète.

25
Kamil Myśliwiec

Tu peux le passer comme

<a [routerLink]="['/Person', propertyWithId]">Person</a>
4
Günter Zöchbauer

Dans mon cas, la directive [routerLink] n'a pas fonctionné pour moi. Donc, je devais le faire par programme.

Modèle de composant:

<a (click)="goToEdit(person.id)" >Edit</a>

Classe de composants:

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

export class PersonComponent{

    constructor(private _route: Router){ }

    goToEdit(id){
        this._route.navigate(['Person/' + id]);
    }

}
1
Rust