Question

我有一个<a>标记，如下所示，

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

所以我想将person.id传递给此/Person路由器。我怎么能通过它＆amp;在Angular 1中@RouteConfig处理params

Answer 1

传递到路由器链接：

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

<强>配置：

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

}

Angular 2 - 将参数传递给路线

3 个答案: