Angular 2 - 用于加载延迟的模块的路由，其中​​包含sevral组件

Question

我有一个包含2个组件的模块（UserAppsComponent和UserAppComponent），我想加载模块懒惰。

根模块代码：

在我的根路由器中，我有：

const routes: Routes = [
{ path: '', redirectTo: '/Dashboard', pathMatch: 'full' },
{ path: 'Dashboard',  component: UserDashboardComponent },
{ path: 'UserApps',  loadChildren: './user-apps-module/user-apps.module#UserAppsModule' },
{ path: 'UserApp/:appId',  loadChildren: './user-apps-module/user-apps.module#UserAppsModule' }

];

懒惰模块代码：

在我的孩子路由器中，我有：

const routes: Routes = [
{ path : 'UserApps', component : UserAppsComponent },
{ path : 'UserApp/:appId', component : UserAppComponent }

];

不幸的是，这对我不起作用。我可以看到它在Chrome网络选项卡上加载模块JS，但没有输出，没有控制台消息。只是空页。我该如何运作？

Answer 1

对于延迟加载，您应该使转到延迟模块的所有路由具有相同的前缀。现在你的路线是

UserApps
UserApp/:appId

更改为：

userapps
userapps/:id

现在两个路由都以相同的方式开头，在主路由器中，只需要一条通向延迟加载模块的路径：

const routes:Routes = [    
   { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
   { path: 'dashboard',  component: UserDashboardComponent },
   {   // path to lazy module
       path:         'userapps', 
       loadChildren: './user-apps-module/user-apps.module#UserAppsModule'
   }
]

接下来，UserAppsModule需要自己的模块根组件，该组件将保存该模块路径的<router-outlet>（惰性模块路径不在AppComponent RouterOutlet中提供，但在子插座中属于懒惰模块。假设您的UserAppsModule根组件是UserAppsRootComponent; UserAppsModule的路由将是

const routes:Route = [
    {
        path:'',
        //should contain <router-outlet> for this module's routes
        component: UserAppsRootComponent, 
        children: [
            //full path: /userapps
            {path: '', component: CrisisListComponent},
            //full path: /useapps/:id
            {path: ':id', component: CrisisListComponent},
        ]
    }
];

顺便说一句，我建议你的路线中只使用小写字符