Question

我想使用routerLink传递一个带url的值。并在另一页上读取该值。就像我有产品清单。在选择第一条记录时，该记录的ID传递到产品详细信息页面。读完该产品之后，我想要显示该产品的详细信息。

那么我如何传递并获取参数？

Answer 1

我假设你有这样的代码：

{ path: 'product/:id', component: ProductDetailComponent }

模板

中的

<a [routerLink]="['/product', id]">Home</a>

或

<a [routerLink]="['/product', 5]">Home</a>

其中id是一个变量，也许你是在循环中得到它。

在ProductDetailComponent中

：

constructor(
  private route: ActivatedRoute,
  private router: Router
) {}
ngOnInit() {

  this.route.params
    // (+) converts string 'id' to a number
    .switchMap((params: Params) => this.yourProductService.getProductById(+params['id']))
    .subscribe((product) => this.product = product);
}

路由器文档：https://angular.io/docs/ts/latest/guide/router.html

Answer 2

使用routerLink标记上的a将其传递给网址。

[routerLink]="['yourRouteHere', {'paramKey': paramValue}]

要获得它，您需要使用ActivatedRoute服务。将其注入您的组件并使用它的订阅方法。我的route是注入服务

this.route.params.subscribe(params => {
   const id = Number.parseInt(params['paramKey']);
}

如果您想从路线段获取参数查询字符串，使用.params

Answer 3

假设您的网址为 http://mit.edu/dashboard ，并且所需的结果为    http://mit.edu/dashboard/user?id=1 然后使用以下代码

<a [routerLink]="['user']" [queryParams]="{id: 1}" </a>

假设您的网址 http://mit.edu/dashboard ，并且您想要的结果为 http://mit.edu/user?id=1 ，请使用以下代码[＆＃34;差异 / Dashobard ＆＃34;从网址遗漏了这里]

<a [routerLink]="['/user']" [queryParams]="{id: 1}" </a>

Answer 4

尝试一下：

步骤1：在路由模块中

{ path: 'product/:id', component: ProductDetailComponent }

第2步：将值发送到路由

<a [routerLink]="['/product', id]">Home</a> //say, id=5

第3步：读取ProductDetailComponent中的值

首先从ActivatedRoute注入'@angular/router并说route是注入的服务。在ngOnInit()方法中使用下面的代码来读取它。

id = this.route.snapshot.paramMap.get('id');

Answer 5

您可以在.html

中使用它

[routerLink]="['/trips/display/' + item.trip, {'paramKey': 'application'}]"

，在.ts中，您可以使用它来恢复参数

this.id = this.route.snapshot.params['id'];
const param = this.route.snapshot.params['paramKey'];

如何在Angular 2中使用routerLink传递和获取参数？

5 个答案: