如何为多个子组件配置 Angular 模块

Question

在我的 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.

请指导。

Answer 1

您可以在您的应用程序路由主文件中添加管理路由并添加模块，如下所示：

app-routing.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: '' }
    ]
}
...

LayoutComponent.html

<main>
<router-outlet></router-outlet>
</main>

我希望你明白我的意思，如果没有，请评论你的问题；会很乐意帮忙的。

如何为多个子组件配置 Angular 模块

How to configure Angular module for multiple Child components

angular-module

angular