angular не может сопоставлять маршруты

Я хочу создать меню в угловом приложении с роунтерлинками. Мой routerlinks выглядит так:

          <li>
            <a routerLink="/overview" [queryParams]="{categorie:'Shopping',subcategorie:'topcategorie'}">
              Shopping</a>
          </li>

Если я нажму на кнопку, я получаю следующую ошибку.

core.js:6241 ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'overview'
Error: Cannot match any routes. URL Segment: 'overview'
    at ApplyRedirects.noMatchError (router.js:4389)
    at CatchSubscriber.selector (router.js:4353)
    at CatchSubscriber.error (catchError.js:29)
    at MapSubscriber._error (Subscriber.js:75)
    at MapSubscriber.error (Subscriber.js:55)
    at MapSubscriber._error (Subscriber.js:75)
    at MapSubscriber.error (Subscriber.js:55)
    at MapSubscriber._error (Subscriber.js:75)
    at MapSubscriber.error (Subscriber.js:55)
    at ThrowIfEmptySubscriber._error (Subscriber.js:75)
    at resolvePromise (zone-evergreen.js:798)
    at resolvePromise (zone-evergreen.js:750)
    at zone-evergreen.js:860
    at ZoneDelegate.invokeTask (zone-evergreen.js:399)
    at Object.onInvokeTask (core.js:41634)
    at ZoneDelegate.invokeTask (zone-evergreen.js:398)
    at Zone.runTask (zone-evergreen.js:167)
    at drainMicroTaskQueue (zone-evergreen.js:569)
    at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:484)
    at invokeTask (zone-evergreen.js:1621)

Мои определения маршрутизатора таковы:

const routes: Routes = [

  { path: 'overview/:categorie/:subcategorie', component: OverviewComponent },
  { path: 'overview/:brand', component: OverviewComponent },
  { path: 'overview/:product', component: OverviewComponent },
  { path: 'coupons', component: CouponComponent },
  { path: 'impressum', component: ImpressumComponent },
  { path: 'datenschutz', component: DatenschutzComponent },
  { path: 'details/:id', component: ProductDetailsComponent },
  { path: 'home', component: LandingpageComponent },
  { path: '', component: LandingpageComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Кто-нибудь знает, почему я получаю эту ошибку?


angular html href routerlink
person tobias    schedule 26.10.2020    source источник

Ответы (4)


arrow_upward
0
arrow_downward

Это потому, что вы устанавливаете queryParams вместо использования настроенных вами маршрутов. Ссылка на routerLink="/overview/shopping/topcategorie" (если вы хотите, чтобы /overview работало { path: 'overview', component: StackOverflowComponent } (или сделайте перенаправление на маршрут категории/бренда/продукта по умолчанию)

(тег a теперь ссылается на overview?categorie=Shopping&subcategorie=topcategorie)

person Lars Vanderheydt    schedule 26.10.2020

arrow_upward
0
arrow_downward

Попробуйте так:

<a [routerLink]="['/overview', 'Shopping', 'topcategorie']">Shopping</a>
person Useme Alehosaini    schedule 27.10.2020

arrow_upward
0
arrow_downward

Используйте это вместо этого:

<a [routerLink]="['overview', 'Shopping', 'topcategorie']">
   Shopping
</a>

or

<a routerLink="overview/Shopping/topcategorie">
   Shopping
</a>
person KShewengger    schedule 27.10.2020

arrow_upward
0
arrow_downward

В модуле маршрутизации приложений вы не объявили маршрут, соответствующий вашим требованиям. Вы объявили переменную пути в своем модуле маршрутизации

  { path: 'overview/:categorie/:subcategorie', component: OverviewComponent },
  { path: 'overview/:brand', component: OverviewComponent },
  { path: 'overview/:product', component: OverviewComponent },

Но вы пытаетесь получить параметры запроса в HTML.

<a routerLink="/overview" [queryParams]="{categorie:'Shopping',subcategorie:'topcategorie'}">
              Shopping</a>

Попробуйте использовать приведенную ниже реализацию.

in .ts

{ path: 'overview', component: OverviewComponent },

в .HTML

 <a [routerLink]="/overview" [queryParams]="{categorie:'Shopping',subcategorie:'topcategorie'}">
                  Shopping</a>

Результирующий URL будет

overview?categorie=Shopping&subcategorie=topcategorie

Выше приведены параметры запроса.

person Akhil Korissery    schedule 27.10.2020