Блог

У меня есть несколько маршрутов, в которых нет статических параметров, чтобы я мог добавить соответствующий компонент для этого маршрута, поэтому я могу легко перемещаться. Моя конфигурация маршрутов выглядит так:

 app-routing.module.ts:

const routes = {
  {path: '', component: MainPageComponent},
  {path: ':category', component: ListPageComponent},
  {path: ':productInfo', component: ProductComponent},
  {path: '404', component: PageNotFoundComponent},
  {path: '**', redirectTo: '404'}
};
 

Вначале я решил использовать распознаватель, чтобы сначала отправить запрошенный URL-адрес в api и выяснить, подходит ли URL-адрес как категория, и если это не так, я сделал еще один запрос к api, чтобы выяснить, подходит ли он как продукт. Но я думаю, что это неэффективно, пока я не передам информацию, отправленную мне api, компоненту, чтобы компоненту не нужно было делать еще один запрос, и именно поэтому я решил использовать resolver.
Я также хотел обрабатывать неправильные маршруты, поэтому, если эти 2 запроса к api были неверными, я хотел перенаправить пользователя на страницу 404. Но я не смог подключить соответствующий компонент для маршрута в распознавателе.
Любой совет или решение, как это сделать?

ОБНОВЛЕНИЕ: @Abhijeet Raj, спасибо за ваш ответ. В настоящее время мы изменили способ определения наших маршрутов, и в итоге это выглядит так: {path: ':category/:slug', component: ProductComponent}, {path: ':category/:brand1/:brand2/:brand3/...', component: ListPageComponent} в этой ситуации, когда у меня есть: «:category /brand1», он перейдет к ProductComponent вместо ListPageComponent, как я могу решить эту проблему?

Но когда у меня есть что-то вроде: ‘: category /: brand1 /: brand2’, из-за наличия более двух параметров в URL, я могу использовать UrlMatcher.

Насколько я понял вашу проблему, :category и :productInfo здесь они ничем не отличаются, оба будут открывать один и тот же компонент. Если вы передадите какую-либо динамическую категорию или информацию о продукте в маршруте, она перейдет только к первому маршруту, указанному в массиве маршрутов, т.Е. :category . Вам нужно будет каким-то образом дифференцировать свои маршруты, например :-

 category/:categoryId
 

и

 product/:productId
 

Таким образом, оба могут ссылаться на разные компоненты.