懒惰加载模块基座模板

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。我的问题 - 有什么办法有基本HTML我UserModule？ 我试图创建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 { 

}