路由和模块答案

【问题标题】：Routing & Modules路由和模块
【发布时间】：2017-06-21 18:37:28
【问题描述】：

我的应用中有以下路由配置：

app.module.ts

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    HttpModule,
    AppRouting,

    // Feature Modules
    CoreModule,
    AuthModule,
    AdminModule,
    SharedModule
  ],
  bootstrap: [AppComponent]
})

app.routing.ts

const routes: Routes = [
  { path: '', redirectTo: 'admin', pathMatch: 'full' },
  { path: 'admin', loadChildren: () => AdminModule }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {preloadingStrategy: PreloadAllModules})
  ],
  exports: [RouterModule]
})

admin.module.ts

@NgModule({
  declarations: [
    AdminComponent
  ],

  imports: [
    CommonModule,
    FormsModule,
    UserModule,

    AdminRouting,
    SharedModule
  ],

  providers: [
    UserService
  ]
})

admin.routing.ts

const routes: Routes = [
  { path: '', component: AdminComponent, canActivate: [AuthGuard], children: [
    { path: 'users', loadChildren: () => UserModule }
  ]}
];

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

user.module.ts

@NgModule({
  declarations: [
    UserComponent,
    UserManageComponent,
    UserListComponent
  ],

  imports: [
    CommonModule,
    FormsModule,

    UserRouting,
    SharedModule
  ]
})

user.routing.ts

const routes: Routes = [
  { path: '', component: UserComponent, children: [
    { path: '', component: UserListComponent },
    { path: 'new', component: UserManageComponent },
    { path: ':id/edit', component: UserManageComponent }
  ]},
];

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

问题来了：

我期望我的应用程序路由会做什么：

/users => not a valid route
/users/new => not a valid route

/admin/users => valid route
/admin/users/new => valid route
/admin => valid route (should render AdminComponent)

我不知道为什么，但是如果我输入 /users，应用程序会渲染 UserComponent，这不是我想要的行为。

我希望仅从 /admin/users 访问 UserComponent。

谁能解释一下为什么？

【问题讨论】：

因为您将所有内容都重定向到管理员：{ path: '', redirectTo: 'admin', pathMatch: 'full' }
这不是问题。即使我删除了此路径，该应用程序仍然无法按预期工作。 /users 应该不可用，但是 /admin/users。
来自style guide 的奖励：请以-routing.module.ts 结束 RoutingModule 的文件名（CLI 将为您执行此操作）

标签： angular angular2-routing angular-routing angular-module angular2-modules

【解决方案1】：

试试这个看看：

admin.routing.ts

const routes: Routes = [
  { path: 'admin', component: AdminComponent, canActivate: [AuthGuard], 
        children: [{ path: 'users', loadChildren: () => UserModule }]}
];

【讨论】：

【解决方案2】：

您是否已经尝试按照here 的建议将 AppRouting 导入移动到导入数组的末尾？

【讨论】：