webentwicklung-frage-antwort-db.com.de

Angular 2 - Übergebe Parameter an Route

Ich habe ein <a> Tag wie unten,

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

Ich möchte also den person.id - Code an diesen /Person - Router übergeben. Wie kann ich es weitergeben und mit @RouteConfig Wie params in Angular 1 behandeln?

16
DilumN

Pass zur Router-Verbindung:

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

Handle in 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 müssen Sie ActivatedRoute ( beispielsweise als Routeneigenschaft ) folgendermaßen einfügen:

constructor(private route: ActivatedRoute) {}

Wenn Sie abonnieren, ist es wichtig, das Abonnement von Observable zu kündigen, um Speicherlecks zu vermeiden.

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

Ebenfalls, @RouteConfig ist veraltet.

25

Sie können es gerne weitergeben

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

In meinem Fall Richtlinie [routerLink] hat bei mir nicht funktioniert. 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]);
    }

}
1
Rust