Angular 5 模块和路由

Posted 2023-02-23

【中文标题】Angular 5 模块和路由

【英文标题】：Angular 5 Modules and Routing

【发布时间】：2018-08-13 23:05:46

【问题描述】：

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

//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,

我很想知道我对这个概念的理解是如何不正确的，或者如果我对这个概念的理解不正确，推荐的方法是什么？

谢谢。

【问题讨论】：

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

@DeborahK 你好。谢谢你的建议。您是否愿意通过发布答案来演示如何？距离我的截止日期只有一个小时，非常感谢一个可行的例子。

你看过 Angular 团队的路由器文档吗？ angular.io/guide/router Angular 文档和 @DeborahK 提供的此类文档有大量示例。

【参考方案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  

【讨论】：

谢谢。如果我需要进行初始处理，比如在加载组件之前进行身份验证检查，是否建议在 DashboardModule 中使用 ngOnInit()？

你可以使用路由守卫。