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>，以便子路由。

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

}

延迟加载模块基础模板

1 个答案: