Angular 5模块和路由

Question

我知道如何配置路由来加载组件，如下所示：

//app.module.ts
const appRoutes: Routes = [
    {path: '', component: HomeComponent},
    {path: 'login', component: LoginComponent},
}

我只是想知道我们是否可以将路由关联到指向包含到一组组件的子路由的模块。类似于名为Dashboard的模块，它在加载与之关联的组件之前执行某些检查。就像是：

• 主页
• 登录
• 仪表板 指数 用品

并做：

//dashboard.module.ts
const appRoutes: Routes = [
    {path: 'dashboard', component: DashboardIndexComponent},
    {path: 'dashboard/articles', component: DashboardArticleComponent},
}

我有兴趣知道我对这个概念的理解是否不正确，推荐的方法是什么？

谢谢。

Answer 1

是的，您可以构建所谓的功能模块，并将该功能的路由添加到该模块。在您的示例中，它将是“仪表板”功能模块。然后，您可以选择延迟加载该模块。有关更多信息和示例，请参阅：angular.io/guide/feature-modules

我在这里有一个更完整的例子：https://github.com/DeborahK/MovieHunter-routing

在我的例子中，“电影”是特征模块。

以下是电影模块的代码示例：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { SharedModule } from '../shared/shared.module';
import { ReactiveFormsModule } from '@angular/forms';

import { MovieListComponent } from './movie-list.component';
import { MovieDetailComponent } from './movie-detail.component';
import { MovieEditComponent } from './edit/movie-edit.component';
import { MovieEditInfoComponent } from './edit/movie-edit-info.component';
import { MovieEditTagsComponent } from './edit/movie-edit-tags.component';

import { MovieService } from './movie.service';
import { MovieParameterService } from './movie-parameter.service';
import { MovieResolver } from './movie-resolver.service';
import { MovieEditGuard } from './edit/movie-edit-guard.service';
import { MovieSearchComponent } from './search/movie-search.component';
import { MovieEditReactiveComponent } from './edit/movie-edit-reactive.component';

export const movieRoutes: Routes = [
  { path: '', component: MovieListComponent },
  { path: 'search', component: MovieSearchComponent },
  {
    path: ':id',
    resolve: { movie: MovieResolver },
    component: MovieDetailComponent
  },
  {
    path: ':id/editReactive',
    resolve: { movie: MovieResolver },
    component: MovieEditReactiveComponent
  },
  {
    path: ':id/edit',
    resolve: { movie: MovieResolver },
    canDeactivate: [ MovieEditGuard ],
    component: MovieEditComponent,
    children: [
      { path: '', redirectTo: 'info', pathMatch: 'full' },
      { path: 'info', component: MovieEditInfoComponent },
      { path: 'tags', component: MovieEditTagsComponent }
    ]
  }
];

@NgModule({
  imports: [
    SharedModule,
    ReactiveFormsModule,
    RouterModule // For lazy loading, use this instead: RouterModule.forChild(movieRoutes)
  ],
  declarations: [
    MovieListComponent,
    MovieDetailComponent,
    MovieEditComponent,
    MovieEditInfoComponent,
    MovieEditTagsComponent,
    MovieEditReactiveComponent,
    MovieSearchComponent
  ],
  providers: [
    MovieService,
    MovieParameterService,
    MovieResolver,
    MovieEditGuard
  ]
})
export class MovieModule { }