Использовать для параметра внутри маршрута Dynami c - PullRequest
Новая
       7

Использовать для параметра внутри маршрута Dynami c

0 голосов
/ 28 марта 2020

У меня есть обзор продукта - этот обзор содержит несколько продуктов с несколькими категориями. Я создал заголовок для фильтрации этих категорий с помощью роутера-розетки. Это работает.

Хотите, чтобы я хотел достичь: допустим, пользователь находится внутри категории «Таблицы», путь будет выглядеть так: .../tables. Теперь, если пользователь щелкает по таблице, я хочу открыть соответствующую страницу продукта.

Я попытался сделать следующее: 

{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'}
];

1 Ответ

1 голос
/ 28 марта 2020

Попробуйте: 

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

Я не знаю, будет ли .toLowerCase() работать в HTML, но вы можете попробовать. Если это не работает, строчные буквы в TypeScript, прежде чем он будет нарисован в DOM.

...