angular - Angular延迟加载模块导航到子问题
问题描述
我正在 Angular 6 中创建一个管理员和用户应用程序,到目前为止,我有两个延迟加载的模块 UserModule 和 AdminModule。我的应用主路由看起来像
const routes: Routes =
[
{ path: '', redirectTo: 'home', pathMatch: 'full' },
{ path: 'user', loadChildren: './user/user.module#UserModule'},
{ path: 'admin', loadChildren: './admin/admin.module#AdminModule' },
{ path: '', redirectTo: 'home', pathMatch: 'full'},
{ path: '**', redirectTo: 'page-not-found'},
];
@NgModule({
declarations: [],
imports: [
CommonModule,
RouterModule.forRoot(routes),
],
exports: [RouterModule]
})
export class AppRoutingModule { }
我的用户模块仅包含 user.module 和 user-routing.module 模块内部有多个组件看起来像
const routes: Routes = [
{
path: '',
component: IndexComponent,
children: [
{path: '', component: IndexComponent },
{path: 'login', component: LoginComponent },
{path: 'Register', component: RegistrationComponent },
]
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class HomeRoutingModule { }
其中之一是带有<app-login></app-login>
带有 URL 的主导航栏的主页,当我尝试导航到不存在的 URL 时出现错误:
未捕获的错误:语法错误,无法识别的表达式:/user/login
我的菜单是
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link page-scroll" routerLink="Register" routerLinkActive='active'>Register</a>
</li>
<li class="nav-item">
<a class="nav-link page-scroll" routerLink='login' routerLinkActive='active'>login</a>
</li>
</ul>
导航到子页面的错误在哪里?
解决方案
您需要查看路由结构,因为每个路由级别都需要它自己的路由器出口
这里工作示例链接
在模块路由 HomeRoutingModule 中,您需要删除空子级别
const routes: Routes = [
{
path: '',
component: IndexComponent,
children: [
// {path: '', component: IndexComponent },
{path: 'login', component: LoginComponent },
{path: 'Register', component: RegistrationComponent },
]
}
];
推荐阅读
- html - 将 div 放置在固定 div 下方和另一个固定 div 的右侧
- python - 使用网络摄像头 python openCV 进行人体检测
- mockito - mockmvc:当我使用mockMvc测试一个控制器时,参数Authentication怎么处理?
- java - WAS 中的 SSL 证书链接错误间歇性发生
- android - 我可以使用 AR CORE 场景形式 API 在表面上渲染 2D 图像或 GIF 图像吗?
- python - Python:允许验证特定字符
- elasticsearch - 如何使用 Elasticsearch 识别文本中的品牌
- python - API 返回包裹在函数中的 JSON 数据,破坏了 json.loads
- java - If-else 范围检查链未按预期执行
- android - 任何用于 SQL 的 kotlin ORM?