Question

以下是我正在敲打的代码片段：

//app-routing.module.ts

@NgModule({
  imports: [ RouterModule.forRoot(routes) ],
  exports: [ RouterModule ]
})
export class AppRoutingModule {}

假设路由是包含不同路由数组的常量。

现在主app模块导入并使用它：

//app.module.ts

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule
   ],
  declarations: [AppComponent, HeroDetailComponent, HeroesComponent, DashboardComponent],
  bootstrap: [AppComponent],
  providers: [HeroService]
})
export class AppModule { }

所以我从官方文档中了解到这一点

导入需要公共（导出）可声明类的模块参考本模块的组件模板。

现在我不明白这一部分：

imports: [ RouterModule.forRoot(routes) ],
exports: [ RouterModule ]

这个导出的RouterModule如何与配置的forRoot一起导出到其他模块？

Answer 1

如果你看一下RouterModule.forRoot（）`

的来源

https://github.com/angular/angular/blob/a0ae1200936d7d51298c0b332edbfb6eefa73b91/packages/router/src/router_module.ts#L144

static forRoot(routes: Routes, config?: ExtraOptions): ModuleWithProviders {
    return {
      ngModule: RouterModule, // <<<====
      providers: [
        ROUTER_PROVIDERS,
        provideRoutes(routes),
        {
          provide: ROUTER_FORROOT_GUARD,
          useFactory: provideForRootGuard,
          deps: [[Router, new Optional(), new SkipSelf()]]
        },

你会看到它增加了模块和提供者。

如果forRoot()只会添加提供商，则重新导出将无效。

当Angular加载导入时，它会注册导入模块的提供程序并实例化它们。 RouterModule的构造函数注入路由器服务，该服务导致调用路由器构造函数。

如何重新导出routerModule工作

1 个答案: