懶惰加載模塊基座模板

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 { 

}