[英]Angular 5 Modules and Routing
I am aware how routes can be configured to load components as shown below: 我知道如何配置路由以加载组件,如下所示:
//app.module.ts
const appRoutes: Routes = [
{path: '', component: HomeComponent},
{path: 'login', component: LoginComponent},
}
I was just wondering if we can associate a route to point to a module that contains sub-routes to a set of components. 我只是想知道我们是否可以将路由关联到指向包含子路由的模块的模块中。 Something like a module named
Dashboard
that performs certain checks before loading components associated with it. 类似名为
Dashboard
的模块,它在加载与之关联的组件之前会执行某些检查。 Something like: 就像是:
And do: 然后做:
//dashboard.module.ts
const appRoutes: Routes = [
{path: 'dashboard', component: DashboardIndexComponent},
{path: 'dashboard/articles', component: DashboardArticleComponent},
}
I am interested in knowing how or if my understanding of the concept is incorrect, what would be the recommended approach? 我想知道我对这个概念的理解是不正确的或不正确的,推荐的方法是什么?
Thank you. 谢谢。
Yes, you can build what's called a feature module and add the routes for that feature to that module. 是的,您可以构建所谓的功能模块并将该功能的路由添加到该模块。 In your example, it would be a "Dashboard" feature module.
在您的示例中,它将是“仪表板”功能模块。 You can then optionally lazy load that module.
然后,您可以选择延迟加载该模块。 For more information and an example, see this: angular.io/guide/feature-modules
有关更多信息和示例,请参见:angular.io/guide/feature-modules
I have a more complete example here: https://github.com/DeborahK/MovieHunter-routing 我在这里有一个更完整的示例: https : //github.com/DeborahK/MovieHunter-routing
In my example, the "movie" is the feature module. 在我的示例中,“电影”是功能模块。
Here is the code for the movie module as an example: 这是电影模块的代码作为示例:
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 { }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.