Question

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

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

修改：我意识到已a somewhat similar question已被问及并已回答。有两个原因导致我找不到特别有帮助的原因：

1）问题非常具体针对用户的情况，因此存在很多噪音＆＃34;。我要求的只是一个单独的功能模块路由示例。

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

Answer 2

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

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

我们正在定义公共或安全的布局。然后在每个目录中提供routes文件，以便在选择创建路径后接管。

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文件中的selctory中。

儿童路线 的 /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

保存auth所需路由和组件的安全目录。

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

Angular 2功能模块路由示例

2 个答案: