如何解决命名路由器插座导致 Angular 11 应用程序中的“无法匹配任何路由”错误
我在 Angular 11 应用程序中使用命名路由器插座。 app.component.html 文件中的代码是
<ng-container *ngIf="showGeneric">
<router-outlet name="general">
</router-outlet>
</ng-container>
<ng-container *ngIf="!showGeneric">
<router-outlet name="non-general">
</router-outlet>
</ng-container>
showGeneric 的值在 app.component.ts 文件中最初设置为 true。
import { NgModule } from '@angular/core';
import { Routes,RouterModule } from '@angular/router';
import { NonGenericComponent } from './non-generic/main-component/non-generic.component';
import { GenericComponent } from './generic/main-component/generic.component';
const routes: Routes = [
{
path: '',redirectTo: 'generic',pathMatch: 'full'
},{
path: 'generic',component: GenericComponent,loadChildren: () => import('./generic/generic.module').then(m => m.GenericModule),outlet: 'general'
},{
path: 'non-generic',component: NonGenericComponent,loadChildren: () => import('./non-generic/non-generic.module').then(m =>
m.NonGenericModule),outlet: 'non-general'
},{
path: '**',pathMatch: 'full'
}
]
@NgModule({
imports: [RouterModule.forRoot(routes)],exports: [RouterModule]
})
export class AppRoutingModule { }
在本地运行应用程序并尝试导航到 http://localhost:4200/generic 时,我收到 错误:未捕获(承诺):错误:无法匹配任何路由。 URL Segment: 'generic'。 我无法弄清楚究竟是什么导致了这个问题。请帮我解决这个问题。
解决方法
正如@mJehanno 所提到的,不需要命名路由器插座来实现此功能
删除命名的路由器出口,只需将子路由传递给路由器配置即可加载此模块
const routes: Routes = [
{
path: '',redirectTo: 'generic',pathMatch: 'full'
},{
path: 'generic',component: GenericComponent,children: [
{
path: '',loadChildren: () =>
import('./generic/generic.module').then(m => m.GenericModule)
}
]
},{
path: 'non-generic',component: NonGenericComponent,loadChildren: () =>
import('./non-generic/non-generic.module').then(
m => m.NonGenericModule
)
}
]
},{
path: '**',pathMatch: 'full'
}
];
在html中
<a [routerLink]='["generic"]'>Generic</a> |
<a [routerLink]='["non-generic"]'>Non Generic</a> |
<router-outlet></router-outlet>
Sample Demo(检查控制台)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。