Angular 2 功能模块路由示例

Question

就 Angular 2 路由而言，我几乎可以找到整个应用程序只有一个路由文件的场景示例。

我希望看到一个示例，它不仅使用一个路由文件，还使用一个主路由文件，然后至少使用一个功能模块路由文件。

编辑：我知道a somewhat similar question 已经被询问和回答了。有两个原因让我觉得其中一个不是特别有用：

1) 该问题非常针对该用户的情况，因此存在很多“噪音”。我所要求的只是一个单独的功能模块路由示例。

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

Answer 1

这是我如何使用子路由处理路由的示例。我认为这将帮助您并教您使用子路由为您的某些组件提供Guard。如果用户缺少身份验证，这将保护某些视图。我在public 和secure 中分开我的，通过布局路由所有内容，然后加载选择任何布局的路由。

确保导出子路由并在布局路由中调用正确的路由。还要确保在每个子路由文件中使用redirectTo。

我们将布局定义为公开或安全。然后在每个目录中提供路由文件，以便在选择创建路由后接管。

app.routing.ts

const APP_ROUTES: Routes = [
    { path: '', redirectTo: '/home', pathMatch: 'full', },
    { path: '', component: PublicComponent, data: { title: 'Public Views' }, children: PUBLIC_ROUTES },
    { path: '', component: SecureComponent, canActivate: [Guard], data: { title: 'Secure Views' }, children: SECURE_ROUTES }
];

然后我有一个布局文件夹

布局

layouts/public/public.components.ts
layouts/public/public.components.html
layouts/secure/secure.components.ts
layouts/secure/secure.components.html

secure.component.ts 是这样的布局，

import { Component, OnInit }        from '@angular/core';
import { Router }                   from '@angular/router';
import { Auth }                     from './../services/auth.service';

@Component({
    providers: [ Auth ],
    selector: 'app-dashboard',
    templateUrl: './secure.component.html'
})
export class SecureComponent implements OnInit {

    constructor( private router: Router, private auth: Auth ) { }

    ngOnInit(): void { }
}

然后在您的安全目录中，您可以创建一个组件并选择您将用于它的模板，

@Component({
    providers: [ Auth ],
    templateUrl: './profile.component.html'
})
export class ProfileComponent implements OnInit {

    constructor( private router: Router, private auth: Auth, private http: Http  ) { }

    ngOnInit() { }
}

现在确保在安全和公共目录中创建您的子路由。一旦路由被击中，子路由将加载正确的类并呈现模板文件。

请记住，它们将是您的布局的子级。因此，您可以在secure.component.html 中放置导航栏和页脚，它将显示在您的所有安全组件中。因为我们使用选择器来加载内容。您的所有安全和公共组件都将加载到布局html 文件内的选择中。

子路线 /public/piublic.routes.ts

export const PUBLIC_ROUTES: Routes = [
    { path: '', redirectTo: 'home', pathMatch: 'full' },
    { path: 'p404', component: p404Component },
    { path: 'e500', component: e500Component },
    { path: 'login', component: LoginComponent },
    { path: 'register', component: RegisterComponent },
    { path: 'home', component: HomeComponent }
];

/secure/secure.routes.ts

export const SECURE_ROUTES: Routes = [
    { path: '', redirectTo: 'overview', pathMatch: 'full' },
    { path: 'items', component: ItemsComponent },
    { path: 'overview', component: OverviewComponent },
    { path: 'profile', component: ProfileComponent },
    { path: 'reports', component: ReportsComponent }
];

总结

我们在Angular2 应用程序的根目录中设置了一个初始路由文件。此路由文件根据用户是否经过身份验证将流量定向到两种布局之一。如果他们对所提供的任何路线公共布局或安全布局具有身份验证。然后，这些布局中的每一个都有一堆子路由和组件，它们被提供给各自的布局。

所以要清理文件结构，

root = /

您控制查看哪个布局的主应用程序路由。

/app.routing.ts

保持布局安全或公开的布局。

公开

`/layouts/public.components.ts
/layouts/public.components.html
/layouts/public.routing.ts`

安全

`/layouts/secure.components.ts
/layouts/secure.components.html
/layouts/secure.routing.ts`

公共目录，其中包含无需身份验证即可查看的任何内容。

/public/home-component.ts
/public/home-component.html

保存身份验证所需路由和组件的安全目录。

/public/profile-component.ts
/public/profile-component.html

Answer 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,
  ],
  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