角解耦父子模块路由完全

Question

在角度应用中，要装载模块，我们需要在路由中使用以下方式，

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

这样，对于每个新模块，这个路由文件将得到一个更新。我是否仍然可以使用子模块，而无需在父模块的“子”数组中注册它呢？这样，功能模块的开发就不会对父模块产生任何影响。

Answer 1

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

例如:您有两个组件

1. 帐户组件
2. 仪表板组件

帐户组件的：您必须创建一个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: [

    ]
})