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

Question

我想使用 routerLink 传递一个带有 url 的值。并在另一页上阅读该值。就像我有产品 list 一样。在选择第一个记录时，该记录的 id 传递到产品详细信息页面。阅读该 productId 后，我想显示该产品的详细信息。

那么如何传递和获取参数呢？

Answer 1

我假设你有这样的代码:

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

在 ProductList 模板中

<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