Angular 2 - Pass Parameter zur Route

Ich habe einen <a> Tag wie unten,Angular 2 - Pass Parameter zur Route

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

Deshalb mag ich die person.id zu diesen /Person Router passieren. Wie kann ich es übergeben es an @RouteConfig wie params in Angular 1

Quelle

2016-10-14 DilumN

Es gibt keine '@ RouteConfig'. Welche Angular2 Version verwendest du? –

Pass Verbindung zum Router:

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

Griff in der Komponente :

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

Zweiter Weg:

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

In diesem Beispiel Sie ActivatedRoute (zB als Route Eigenschaft) so zu injizieren haben:

constructor(private route : ActivatedRoute) {}

Wenn Sie sich vorher anmelden - es ist wichtig zu stornieren Observable zu verhindern Speicherlecks.

Voll Beispiel:

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

Auch @RouteConfig ist veraltet.

Quelle

2016-10-14 14:24:34

Gute Antwort, paar Kommentare. Zuerst fehlt das erste Anführungszeichen in der "Person". Zweitens, nach [Routing und Navigation] (https://angular.io/docs/ts/latest/guide/router.html#!#route-parameters), können Sie auch auf die Parameter wie folgt zugreifen: 'ngOnInit() { this.route.params.forEach ((params: Params) => { let id = + params ['id']; // (+) konvertiert string 'id' in eine Zahl }); ' Schließlich, wenn Sie subscribe verwenden, denken Sie daran, auf dem ngOnDestroy abzubestellen. – jjokela

Vielen Dank für Ihre Aufmerksamkeit über das einfache Zitat - Ich habe Post bearbeitet. Über Abbestellen - das ist offensichtlich. Es ist wichtig, dies zu tun, um Speicherlecks zu vermeiden.Ich will hinzufügen, um sie zu beantworten :) –

** Griff in Komponente: ** 'this.route.params.subscribe ( (params: Params) => { this.id = params [ "id"]; } ); 'diese Sache, wird es in der Klasse geschrieben werden, wo der Benutzer navigiert wird, das heißt, in seiner ngOnInit() -Methode. Recht? –

Griff & können Sie es passieren wie

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

Quelle

2016-10-14 14:22:54

In meinem Fall funktionierte die Direktive [routerLink] nicht für mich. Also musste ich es programmatisch machen.

Komponentenvorlage:

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

Komponentenklasse:

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

export class PersonComponent{ 

    constructor(private _route: Router){ } 

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

}

Quelle

2017-05-29 11:07:32 user3284463

Angular 2 - Pass Parameter zur Route

Antwort

Verwandte Themen