Question

我是angular2的新手，我目前面临一些奇怪的路由问题，尤其是延迟加载。

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

通过我的路由设置，我有两个问题：

根页面（如：http://myapp.com）正在加载CustomerListComponent而不是HomeComponent，这也绕过了SecureComponent
customer / edit /：id有一个非常奇怪的行为，它加载正确的模板，但url加载是/ customer，组件代码生成错误，因为显然没有提供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]
})

customer-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]
})

你对我做错了什么有什么想法吗？

Answer 1

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

你的app-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]
})

延迟加载路由问题

1 个答案: