Question

假设我有三种不同的API来描述类别（汽车，颜色，食物）。在routerLink我使用此routerLink="/{{element.name}}"，在我的模块中我使用：

 path: ':id',
 component: ListComponent

现在，当我路由时它变成这样：localhost:4200/red，这对我来说很好，但是我怎样才能发送这个URL的唯一内容以确保该元素是彩色的并在我的代码中处理它？

Answer 1

使用类似的东西：

export const routes: Routes = [
  //...
  { path: 'colors/:color', component: ColorsComponent },
  //...
];

您可以在模板中使用以下路径：

<a [routerLink]="['/colors', 'red']">Something</a>

或者：

goToRed() {
  this.router.navigate(['/colors', 'red']);
}

当然'red'也可以是一个变量。您可以在组件的ngOnInit()：

中订阅此参数

ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
       this.color = params['color'];
       //You can check the color here.
    });
  }

您也可以将此方法用于汽车和食品。

<强>更新

如果您想传递 aditional'参数'。你可以试试这个：

{
    path: 'colors/:color',
    component: ColorComponent,
    data: {someValue: 123}
}

在您的组件中，您可以使用this.route.data来访问它。该网址仍然如下所示：例如localhost:4200/colors/red。

Angular：如何使用路由路径发送params？

1 个答案: