Angular 2功能模块路由示例

发布时间：2020-12-17 08:02:35 所属栏目：安全来源：网络整理

导读：就Angular 2路由而言,我大多能够找到整个应用程序中只有一个路由文件的场景示例. 我想看一个不只使用一个路由文件,而是使用主路由文件,然后至少使用一个功能模块路由文件的示例. 编辑：我意识到a somewhat similar question已被问及答案.有两个原因我没有发

就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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!