延迟加载路由问题

我对angular2很新，我目前正在面对一些与路由特别是延迟加载有关的奇怪问题。延迟加载路由问题

我的应用程序在两个（更多）布局中分开，为此我使用了两个组件（PublicComponent和SecureComponent），这使我可以加载完全不同的布局，并将项目组织为可扩展。

随着我的路由设置，我有两个问题：

根页面（如：http://myapp.com）被加载CustomerListComponent代替HomeComponent，这也是绕过SecureComponent
客户/编辑/：ID有一个非常奇怪的行为，它加载正确的模板，但URL加载是/客户和组件代码生成错误，因为ID参数显然是不提供

我的app-routing.module.ts：

const APP_ROUTES: Routes = [ 
    { path: '', redirectTo: '/home', pathMatch: 'full'}, 
    { 
     path: '', 
     component: PublicComponent, 
     children: [ 
      { path: 'login', component: LoginComponent } 
     ] 
    }, 
    { 
     path: '', 
     component: SecureComponent, 
     canActivate: [LoggedInGuard], 
     children: [ 
      { path: 'home', component: HomeComponent }, 
      { path: 'customer', loadChildren: 'app/customer/customer.module#CustomerModule' } 
     ] 
    } 
]; 

@NgModule({ 
    imports: [RouterModule.forRoot(APP_ROUTES)], 
    exports: [RouterModule] 
})

客户routing.module.ts：

export const CUSTOMER_ROUTES : Routes = [ 
    { path: '', component: CustomerListComponent }, 
    { path:'new', component: CustomerEditComponent }, 
    { path:'edit/:id', component: CustomerEditComponent } 
]; 

@NgModule({ 
    imports: [RouterModule.forChild(CUSTOMER_ROUTES)], 
    exports: [RouterModule] 
})

你有什么我做错了任何想法？

来源

2016-12-04 Fabien MEYNARD

如果将路线改为HomeComponent会怎样？ –

没有任何更改此 –

删除'CustomerListComponent'，看看会发生什么变化。 –

我想通了。我的错误是在懒惰的路线配置我也必须指定路径。

在这里我的工作设置：

APP-routing.module.ts

const APP_ROUTES : Routes = [ 
    { path: '', redirectTo: 'home', pathMatch: 'full' }, 
    { 
     path: '', 
     component: PublicComponent, 
     children: [ 
      { path: 'login', component: LoginComponent } 
     ] 
    }, 
    { 
     path: '', 
     canActivate: [LoggedInGuard], 
     component: SecureComponent, 
     children: [ 
      { path: 'home', component: HomeComponent }, 
      { 
       path: 'customer', 
       loadChildren: 'app/customer/customer.module#CustomerModule' 
      } 
     ] 
    } 
]; 



@NgModule({ 
    imports: [RouterModule.forRoot(APP_ROUTES)], 
    exports: [RouterModule] 
})

而我的客户routing.module.ts

export const CUSTOMER_ROUTES : Routes = [{ 
    path: 'customer', 

    canActivate: [ LoggedInGuard ], 
    component: SecureComponent, 
    children: [ 
     { path: '', component: CustomerListComponent }, 
     { path:'new', component: CustomerEditComponent }, 
     { path:'edit/:id', component: CustomerEditComponent } 
    ] 
}]; 
@NgModule({ 
    imports: [RouterModule.forChild(CUSTOMER_ROUTES)], 
    exports: [RouterModule] 
})

非常感谢罗马下他帮帮我。

来源

2016-12-04 19:45:20

那么你已经添加了多个路径与path:''这是错误的。想象一下，如果您的网站是www.localhost.com，那么您已将此路径分配给publicComponent和SecureComponent。

您的应用程序，routing.module.ts应该是像这样的东西..

const APP_ROUTES: Routes = [ 
    { path: '', redirectTo: 'loginmain', pathMatch: 'full'}, 
    { 
     path: 'loginmain', 
     component: PublicComponent, 
     children: [ 
      { path: 'login', component: LoginComponent } 
     ] 
    }, 
    { 
     path: 'secure', 
     component: SecureComponent, 
     canActivate: [LoggedInGuard], 
     children: [ 
      { path: '', redirectTo:'home'}, 
      { path: 'home', component: HomeComponent }, 
      { path: 'customer', loadChildren: 'app/customer/customer.module#CustomerModule' } 
     ] 
    } 
]; 

@NgModule({ 
    imports: [RouterModule.forRoot(APP_ROUTES)], 
    exports: [RouterModule] 
})

来源

2016-12-04 15:58:09

完全相同的行为:( –

延迟加载路由问题

回答

相关问题