在延迟加载模块中调用 [forRoot](https://stackoverflow.com/questions/40498081/routermodule-forrootroutes-vs-routermodule-forchildroutes)，后果是将在`延迟加载模块注入器`中创建所有全局服务的新实例，这将导致不可预知的结果。

仅在根应用程序模块 AppModule 中调用 forRoot, 在任何其他模块中调用它，尤其是在延迟加载的模块中，是违背 Angular 路由模块的设计本意的，并且可能会产生运行时错误。

确保导入 forRoot 方法的结果，而不要将它添加到任何其他@NgModule 列表中。

每个应用程序都有一个起点（根），主路由服务应该用 forRoot 初始化，而特定“子”功能的路由应该用 forChild 额外注册。这对于不必在应用程序启动时加载的子模块和延迟加载模块非常有用，相当于 Angular 开发人员被告知重用 RouterService 而不是注册新服务，后者可能会导致运行时错误。

forRoot 静态方法是为 Angular 应用程序配置根路由模块的方法。 当我们调用 RouterModule.forRoot(routes) 时，意思是在要求 Angular 在全局实例化 Router 类的一个实例。 就像 Angular 创建一个新的基础 AppModule 来导入开发人员定义的所有的功能模块一样，它也提供了 AppRoutingModule 来导入我们在应用程序里定义的所有子路由。

在开发人员通过 Angular CLI 创建的新应用程序中，forRoot 方法实际上已经在 app-routing.module.ts 中使用。 在整个 Angular 应用程序中，只能使用一次 forRoot 方法，这是因为此方法告诉 Angular 在后台实例化 Router 类的实例，并且应用程序中只能有一个路由器。

# RouterModule.forChild(routes)

当开发人员使用 forChild 静态方法时，我们基本上是在告诉 Angular，“应用程序中已经有一个 Router 实例可用，所以请向该实例注册所有这些路由。”

forChild 静态方法很有用，因为它通过允许我们在应用程序中保持关注点分离来发挥 Angular 模块功能的核心部分。

假设我们想在应用程序中为用户设置创建一个新的功能模块，这个功能将包含一些路由。将这些路由直接添加到 AppRoutingModule 中不是一个好的设计，这最终会随着应用程序的规模增长而变得难于维护。可以使用 forChild 方法在应用程序中保持关注点分离。 首先，创建一个新的 UserSettingsRoutingModule：

```typescript
import { NgModule } from  '@angular/core';
import { Routes, RouterModule } from  '@angular/router';

import { UserSettingsComponent } from './user-settings.component';
import { UserProfileComponent } from  './user-profile/user-profile.component';

const  routes:  Routes  = [
    {
        path:  'settings',
        component:  UserSettingsComponent,
        children: [
            {
                path:  'profile',
                component: UserProfileComponent 
            }
        ]
    }
];

@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export  class  UserSettingsRoutingModule { }
```

注意上面 forChild 方法的使用。 因为已经使用了 forRoot 方法，所以现在只需要将子路由注册到已经实例化的应用程序路由器。

之后创建 UserSettingsModule：

```typescript
import { NgModule, CommonModule } from  '@angular/core';
import { UserSettingsRoutingModule } from  './user-settings-routing.module';

@NgModule({
    imports: [
        CommonModule,
        UserSettingsRoutingModule
    ],
    // Configure the rest of your module here
})
export class UserSettingsModule { }
```

ITPub博客

关于在 Angular 应用里重复调用 RouterModule.forRoot(ROUTES) 的讨论

最新文章