javascript - 延迟加载模块基础模板

Question

在 app.module.ts 中，我加载了 2 个这样的惰性模块

const appRoutes: Routes = [
    { path: 'anonym', loadChildren: './anonym/anonym.module#AnonymModule' },
    { path: 'user', loadChildren: './user/user.module#UserModule', canActivate: [AuthGuard] }
];

在app.component.html中我可以编写一些基本的html。我的问题 - 有什么方法可以为我的 UserModule 提供基本 html 吗？ 我尝试创建 user.component.ts 并像在 app.module.ts 中一样加载它

import { UserComponent } from './user.component';
@NgModule({
    declarations: [UserComponent],
    bootstrap: [UserComponent]
});

但它没有向我显示 user.component.html

Answer 1

在您的用户模块中定义一个带有空路径的基本路由，然后将子路径定义为子路径。

const ROUTES: Routes = [
    {
        path: '',
        component: UsersComponent,
        children: [
            {
                path: '',
                pathMatch: 'full',
                redirectTo: 'login'
            }, {
                path: 'login',
                component: LoginComponent
            }, {
                path: 'logout',
                component: LogoutComponent
            }
        ]
    }
];

UsersComponent现在将用作基本组件，如果您导航到 /users它将重定向到 /users/login路径。

确保您的 UsersComponent有一个模板 <router-outlet></router-outlet>所以 child 的路线。

@NgModule({
    imports: [
        RouterModule.forChild(ROUTES)
    ],
    exports: [
        RouterModule
    ]
})
export class UsersModule {

}