角度无法匹配路线

编程问答 2022-06-06

问题描述

我想在带有rounterlinks的有角度的应用程序中创建菜单。 我的routerlink看起来像这样：

          <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',{ path: 'overview/:product',{ 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 { }

有人知道为什么我会收到此错误吗？

解决方法

这是因为您设置的是queryParams而不是使用已设置的路由。链接到routerLink="/overview/shopping/topcategorie"（如果您希望/overview工作{ path: 'overview',component: StackOverflowComponent }（或重定向到默认类别/品牌/产品路线

（标签现在链接到overview?categorie=Shopping&subcategorie=topcategorie）

,

尝试这种方式：

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

改为使用此：

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

或

<a routerLink="overview/Shopping/topcategorie">
   Shopping
</a>
,

在“应用程序路由”模块中，您尚未声明与您的要求匹配的路由。您已经在路由模块中声明了路径变量

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

但是您正在尝试在HTML中查询参数。

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

尝试使用以下实现。

.ts 

{ path: 'overview',

在.HTML

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

结果网址为

overview?categorie=Shopping&subcategorie=topcategorie

以上是查询参数。

angularangularhrefhrefhrefhtmlrouterlink