Угловые 2 - параметры Пасс в пути

Question

У меня есть <a> тег, как показано ниже,

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

Так что я хочу передать person.id к этому /Person маршрутизатору. Как я могу передать его & обрабатывать его на @RouteConfig как params в угловых 1

Answer 1

Pass к маршрутизатору ссылке:

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

Ручка в компоненте :

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

Второй способ:

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

В этом примере вы должны вводить ActivatedRoute (например, как маршрут собственности) так:

constructor(private route : ActivatedRoute) {} 

Если вы подписались - это очень важно отказаться от подписки Observable для предотвращения утечки памяти.

Полный пример:

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

Кроме того, @RouteConfig является устаревшим.

Answer 2

Вы можете передать его как

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

Answer 3

В моем случае директива [routerLink] не работала для меня. Поэтому мне пришлось делать это программно.

шаблон компонента:

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

Компонент Класс:

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

export class PersonComponent{ 

    constructor(private _route: Router){ } 

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

}