web-dev-qa-db-ja.com

Angular 2-Routeにパラメーターを渡す

以下のような<a>タグがありますが、

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

そこで、このperson.idルーターに/Personを渡したいと思います。 Angularのparamsのような@RouteConfigでそれを渡して処理するにはどうすればよいですか1

angularangular-ui-router
16
DilumN

パスルーターリンク：

<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（e.g。route property）を挿入する必要があります。

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();
    }
}

構成：

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

また、@RouteConfigは非推奨です。

25
Kamil Myśliwiec

次のように渡すことができます

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

私の場合、ディレクティブ[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]);
    }

}
1
Rust