用于动态路由内部的参数

Question

我有一个产品概览 - 此概览包含多个类别的多个产品。我创建了一个 header 来使用 router-outlet 过滤这些类别。这行得通。

想要我想要实现的：假设用户在类别 'Tables' 内，路径将如下所示：.../tables。现在，如果用户单击 table，我想打开相应的产品页面。

我尝试执行以下操作：

{path: 'products', component: ProductsComponent, data: {breadcrump: 'Produkte'}, children: [
  {path: '', redirectTo: 'all', pathMatch: 'full'},
  {path: ':category', component: ProductOverviewComponent},
  {path: ':category/:name', component: ProductPageComponent},
]},

并在点击路由时调用以下路径：

routerLink="/products/{{product.category.toLowerCase()}}/{{product.name.toLowerCase()}}"

无论如何这都行不通。使用路径将无止境，怎么办？

编辑：此外，我意识到，尝试路由到 routerLink="/"（仅当在类别页面上时）也不会起作用 - 可能是我整个路由的问题。用整个路由器集更新了问题。

const routes: Routes = [
  {path: '', component: HomeComponent},
  {path: 'about', component: AboutComponent},
  {path: 'upload', component: UploadComponent},
  {path: 'request', component: RequestComponent},
  {path: 'products', component: ProductsComponent, data: {breadcrump: 'Produkte'}, children: [
      {path: '', redirectTo: 'all', pathMatch: 'full'},
      {path: ':category', component: ProductOverviewComponent},
      {path: ':category/:name', component: ProductPageComponent},
    ]},
  {path: 'error404', component: NotFoundComponent},
  {path: '**', redirectTo: '/error404'}
];

Answer 1

尝试：

<a [routerLink]="['/products', product.category, product.name]"> Link </a>

我不知道 .toLowerCase() 是否适用于 HTML，但您可以尝试一下。如果它不起作用，请在 DOM.

中绘制之前在 TypeScript 中将其小写

用于动态路由内部的参数

Use to parameter inside of dynamic route

typescript

angular-routing

angular