angular - 如何以编程方式将参数传递给 Angular 2 中的辅助路由？

Question

使用 angular2，我想在我的组件中以编程方式打开一个辅助路由。

此代码使用“列表”路径打开路由，并在正确命名的路由器导出中打开路由，但我不确定如何将参数传递给路由:

this.router.navigate(['./', { outlets: { 'list-outlet': 'list' } }]);

Answer 1

显示特定产品详细信息的组件的路由需要该产品的 ID 的路由参数。我们可以使用以下路由来实现:

export const routes: Routes = [
  { path: '', redirectTo: 'product-list', pathMatch: 'full' },
  { path: 'product-list', component: ProductList },
  { path: 'product-details/:id', component: ProductDetails }
];

注意 product-details 路由路径中的 :id ，它将参数放在路径中。例如，要查看 ID 5 产品的 product-details 页面，您必须使用以下 URL:localhost:3000/product-details/5链接到带有参数的路由

在 ProductList 组件中，您可以显示产品列表。每个产品都有一个指向 product-details 路由的链接，传递产品的 ID:

<a *ngFor="let product of products"
  [routerLink]="['/product-details', product.id]">
  {{ product.name }}
</a>

请注意，routerLink 指令传递一个指定路径和路由参数的数组。或者，我们可以通过编程方式导航到路线:

goToProductDetails(id) {
  this.router.navigate(['/product-details', id]);
}

ProductDetails 组件必须读取参数，然后根据参数中给出的ID 加载产品。ActivatedRoute 服务提供了一个 params Observable，我们可以订阅它来获取路由参数(参见 Observables)

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'product-details',
  template: `
    <div>
      Showing product details for product: {{id}}
    </div>
  `,
})
export class LoanDetailsPage implements OnInit, OnDestroy {
  id: number;
  private sub: any;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
       this.id = +params['id']; // (+) converts string 'id' to a number

       // In a real app: dispatch action to load the details here.
    });
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }
}

ActivatedRoute 上的 params 属性是 Observable 的原因是路由器在导航到同一组件时可能不会重新创建组件。在这种情况下，参数可能会更改而无需重新创建组件。

Plunkr example

信息来自 here