Angulaire 2 - Passer des paramètres à la Route

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

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

Donc j'ai envie de passer à la person.id à ce /Person routeur. Comment puis-je passer & poignée sur @RouteConfig comme params Angulaire 1

Il n'y a pas de @RouteConfig. Ce Angular2 version utilisez-vous?

OriginalL'auteur DilumN | 2016-10-14

  1. 23

    Passer de routeur lien:

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

    Poignée en composant:

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

    Deuxième façon:

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

    Dans cet exemple, vous avez à injecter ActivatedRoute (e.g comme la route de la propriété) comme ça:

    constructor(private route : ActivatedRoute) {}

    Si vous vous abonnez - il est important pour vous désabonner 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 : ...},
    ...
];

    Aussi, @RouteConfig est obsolète.

    Bonne réponse, quelques commentaires. Tout d'abord, il vous manque l'ouverture d'apostrophes dans le '/Person'. En deuxième lieu, selon Routage et de Navigation, vous pouvez accéder aux paramètres comme ceci: ngOnInit() { this.route.params.forEach((params: Params) => { let id = +params['id']; // (+) converts string 'id' to a number }); Enfin, si vous utilisez abonnez-vous, n'oubliez pas de vous désinscrire sur le ngOnDestroy.
    Merci pour votre attention à propos de la citation simple - j'ai édité le post. À propos de désinscription, c'est évident. Il est important de le faire pour empêcher les fuites de mémoire. Je vais l'ajouter à la réponse 🙂
    Poignée en composant: this.route.params.subscribe( (params : Params) => { this.id = params["id"]; } ); cette chose, il sera writtern dans cette classe où l'utilisateur sera navigué, qui est, dans son ngOnInit() la méthode. Droit?
    Aussi, où puis-je trouver ce Abonnement de la classe. Il est en train de jeter erreur que de ne pas trouver..

    OriginalL'auteur Kamil Myśliwiec

  2. 4

    Vous pouvez la passer comme

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

    OriginalL'auteur Günter Zöchbauer

  3. 1

    Dans mon cas, la directive [routerLink] ne fonctionne pas pour moi. Donc, j'ai dû le faire par programmation.

    Modèle de composant:

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

    Classe De Composant:

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

export class PersonComponent{

    constructor(private _route: Router){ }

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

}

    OriginalL'auteur Rust