Angular 2功能模块路由示例

Question

就Angular 2路由而言,我大多能够找到整个应用程序中只有一个路由文件的场景示例.

我想看一个不仅使用一个路由文件,而且使用主路由文件,然后至少使用一个功能模块路由文件的示例.

编辑:我意识到有一个类似的问题已经被问及并回答了.有两个原因我没有找到一个特别有用的:

1)问题非常具体针对用户的情况,因此存在很多"噪音".我要求的只是一个单独的功能模块路由示例.

2)该问题的答案似乎没有解决如何为功能模块创建路由文件,然后将其绑定回应用程序的主路由.也许它就在那里,我只是错过了它,但我没有看到它.

Answer 1

让我们看看这个例子是否涵盖了您正在寻找的内容.

这些是使用的模块:

• 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,
  ],
  declarations: [...],
  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