angular - 如何为多个子组件配置 Angular 模块
问题描述
在我的 Angular 项目中,我需要为 Admin 创建一个单独的部分并将所有组件保留在那里......现在我为此创建了一个单独的模块,但无法根据路由呈现组件......
我的代码:组件
- 管理员配置文件组件
- 管理员订阅组件
现在在模块上...... 创建管理模块和routing.module.ts。
const routes: Routes = [
{ path: '/profile', component: ProfileComponent },
{ path: '/subscription', component: SubscriptionComponent },
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class adminRoutingModule { }
现在在 app.module.ts 我将路由配置为:
path: 'admin',
loadChildren: () =>
import('./modules/admin/admin.module').then(
(m) => m.adminModule
),
canActivate: [AuthGuard],
我想要的结果:
url: admin/profile => load profile component
url: admin/subscription => load subscription component.
请指导。
解决方案
您可以在应用程序路由主文件中添加管理路由并添加模块,如下所示:
应用程序路由.module.ts
...
{
path: 'admin',
loadChildren: 'app/modules/admin/admin.module#AdminModule',
canActivate: [AuthGuard],
canActivateChild: [AuthGuard], // Add this if you have authguard for child routes as well.
}
...
admin.routing.module.ts
...
{
path: '',
component: LayoutComponent,
children: [
{ path: '', redirectTo: 'profile', pathMatch: 'full' },
{ path: 'profile', component: ProfileComponent },
{ path: 'subscription', component: SubscriptionComponent },
{ path: '**', redirectTo: '' }
]
}
...
布局组件.html
<main>
<router-outlet></router-outlet>
</main>
我希望你明白这一点,如果没有,请评论你的问题;会很乐意帮忙。
推荐阅读
- java - Maven 模块,在 Eclipse 上调试
- pandas - 将日期差异与 pandas 时间戳值进行比较
- angular - 如果我有虚拟机并且不想使用 localhost,如何正确使用 Angular CLI
- javascript - 从数据库中获取文档快照并将其 ServerValue.TIMESTAMP 值转换为日期
- date - 有没有办法计算日期范围内的天数?
- c# - 在 Azure 函数中以编程方式设置 RunOnStartup?
- java - 和奇数程序
- node.js - 像数组一样组织猫鼬所有输出
- ionic-framework - 允许在平板电脑上旋转屏幕,但在 Ionic 4 中不允许手机旋转
- r - 加入 2 个数据帧的指南,使 df2 的每一行成为 df1 的一整列,迭代 df2 的所有行