Question

在角度应用程序中，要延迟加载模块，我们需要在路由中使用以下方法，

{
        path: '',
        component: MyLayoutComponent,
        children: [
            { path: 'child', loadChildren: './child/child.module#ChildModule' }
        ]
}

通过这种方式，对于每个新模块，此路由文件将获得更新。有什么方法我仍然可以使用子模块而无需在孩子们注册它们。父模块的数组？因此，功能模块的开发不会对父模块产生任何影响。

Answer 1

您必须为子组件创建模块文件。

例如：您有两个组件

帐户组件
仪表板组件

对于帐户组件：您必须创建一个account.module文件，以此方式设置帐户组件的路由。

const routes: Routes = [
    {
        path: '',
        children: [
            {
                path: 'account',
                component: AccountComponent
            }
        ]
    }
];

@NgModule({
    imports: [
        BrowserModule,
        RouterModule.forChild(routes)
    ],
    declarations: [AccountComponent]
})

对于仪表板组件：您必须创建一个dashboard.module文件，以此方式设置仪表板组件的路径。

const routes: Routes = [
    {
        path: '',
        children: [
            {
                path: 'dashboard',
                component: DashboardComponent,
            }
        ]
    }
];

@NgModule({
    imports: [
        CommonModule,
        TranslateModule,
        RouterModule.forChild(routes)
    ],
    declarations: [DashboardComponent]
})

在主路线文件或APP模块文件中，您必须导入模块。

const appRoutes: Routes = [
    {path: 'dashboard', loadChildren: './modules/dashboard/dashboard.module#DashboardModule'},
    {path: 'account', loadChildren: './modules/account/account.module#AccountModule'}
];


@NgModule({
    imports: [
        CommonModule,
        DashboardModule,
        AccountModule,
        RouterModule.forRoot(appRoutes)
    ],
    declarations: [],
    providers: [

    ]
})

Angular - 完全解耦父模块和子模块路由

1 个答案: