就Angular 2路由而言,我大多能够找到整个应用程序中只有一个路由文件的场景示例.
我想看一个不只使用一个路由文件,而是使用主路由文件,然后至少使用一个功能模块路由文件的示例.
编辑:我意识到a somewhat similar question已被问及答案.有两个原因我没有发现那个特别有用:
1)问题是针对该用户的情况非常具体,因此存在很多“噪音”.我要求的只是一个单独的功能模块路由示例.
2)该问题的答案似乎没有解决如何为功能模块创建路由文件,然后将其重新绑定到应用程序的主路由中.也许它就在那里,我只是错过了它,但我没有看到它.
让我们看看这个例子是否涵盖了您正在寻找的内容.
这些是使用的模块:
> AppModule(根模块)
> UsersModule(功能模块)
下面的片段是简化的.
app.module.ts
import { UsersModule } from './users.module'; import { AppRouting } from './app.routing'; @NgModule({ imports: [ BrowserModule,UsersModule,AppRouting,],declarations: [...],providers: [...],bootstrap: [ AppComponent ] }) export class AppModule { }
app.routing.ts
const appRoutes: Routes = [ { path: '',redirectTo: 'home',pathMatch: 'full' },{ path: 'home',component: Home },{ path: '**',component: NotFound },//always last ]; export const AppRouting = RouterModule.forRoot(appRoutes,{ useHash: true });
users.module.ts
import { NgModule } from '@angular/core'; import { UsersRouting } from './users.routing'; @NgModule({ imports: [ CommonModule,// ngFor,ngIf directives UsersRouting,providers: [...] }) export class UsersModule { }
users.routing
const usersRoutes: Routes = [ { path: 'users',children: [ { path: '',component: Users },{ path: ':id',component: User } ] } ]; export const UsersRouting = RouterModule.forChild(usersRoutes);
Plunker:
http://plnkr.co/edit/09Alm0o4fV3bqBPUIFkz?p=preview
示例代码还包括AboutModule(延迟加载模块,包括解析示例),但不包括共享模块示例.
您可以在以下幻灯片中找到更多详细信息
https://slides.com/gerardsans/ngpoland-amazing-ng2-router
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。