我想在带有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', 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 { }
有人知道为什么我会收到此错误吗?
答案 0 :(得分:0)
这是因为您设置的是queryParams而不是使用已设置的路由。链接到routerLink="/overview/shopping/topcategorie"
(如果您希望/overview
工作{ path: 'overview', component: StackOverflowComponent }
(或重定向到默认类别/品牌/产品路线
(标签现在链接到overview?categorie=Shopping&subcategorie=topcategorie
)
答案 1 :(得分:0)
尝试这种方式:
<a [routerLink]="['/overview', 'Shopping', 'topcategorie']">Shopping</a>
答案 2 :(得分:0)
改为使用此:
<a [routerLink]="['overview', 'Shopping', 'topcategorie']">
Shopping
</a>
或
<a routerLink="overview/Shopping/topcategorie">
Shopping
</a>
答案 3 :(得分:0)
在“应用程序路由”模块中,您尚未声明与您的要求匹配的路由。您已经在路由模块中声明了路径变量
{ 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>
尝试使用以下实现。
.ts
{ path: 'overview', component: OverviewComponent },
在.HTML
中 <a [routerLink]="/overview" [queryParams]="{categorie:'Shopping',subcategorie:'topcategorie'}">
Shopping</a>
结果网址为
overview?categorie=Shopping&subcategorie=topcategorie
以上是查询参数。