angular2 - 'imports' 和 'exports' 如何在 Angular2 模块中工作？

Question

我是 Angular2 的新手，很难理解 @NgModule Angular2 中的导入和导出。

以下面的代码为例-:

@NgModule({
  imports: [
    RouterModule.forChild(heroesRoutes)
  ],
  exports: [
    RouterModule
  ]
})

在导入部分我要导入什么？ 路由器模块，或 forChild() 函数，或函数 forChild() 返回的模块？是哪一个？

另外，当我再次导出 RouterModule 时，documentation说以下-:

Our last step is to re-export the RouterModule. By re-exporting the RouterModule, our feature module will be provided with the Router Directives when using our Routing Module.

那么这是否意味着导入上述 NgModule 的任何模块都可以访问 RouterModule 中的所有代码？

这是否有点像如果我用 C 编写一个包含 math.h 的自定义头文件，如果我现在使用该头文件，我不再需要在我的程序中单独包含 math.h。 我的类比正确吗？

谁能解释一下这里的核心概念，这样我就不会每次看到新代码都被难住了。

Answer 1

Angular2 中的 Module 与 Angular1 modules 非常相似，它基本上是一个包，包含所有可以一起运送的零碎部分。

例如，如果您有一个 LoginComponent 由于某些原因连接到一个服务，即 LoginService，它执行一些 http 请求以获取一些用户信息，您可以创建一个 LoginModule，它将 LoginComponent 和 LoginService 一起作为 LoginModule .

LoginService 也可以使用一些接口(interface)，例如 UserInterface，它同样可以发送到 LoginModule 给消费者。

因此，如果我是您的客户并且我要使用您的一般登录功能，那么我只需导入您的 LoginModule 以及您所有可用于我的 AppComponent 的好东西就会变得容易得多!

因此，您的 LoginModule 类(它只是一个简单的 javascript 文件和一个函数)应该导出 LoginModule 以供我使用:)。

LoginModule 看起来像这样:

   @NgModule({
      declaration:[LoginComponent , LogoutComponent], 
      exports: [
        LoginComponent , LogoutComponent
      ],
      providers:[LoginService]
    })
    export class LoginModule{

    }

所以在我的 AppModule 中，我将导入您的 LoginModule。

@NgModule({
  imports: [
    LoginModule,
    RouterModule.forChild(heroesRoutes) // another imported module that I need beside the Login
  ]
})

但是:

如果我知道您的代码并且我不需要您的任何额外功能、组件、类和其他东西而我只需要使用您的 LoginComponent ，我可能更愿意只声明我正在使用 LoginComponent 而我不不想导入大量的 LoginModule !

@NgModule({
  declaration:[LoginComponent],
  imports: [
    RouterModule.forChild(heroesRoutes)
  ]
})

只有当 LoginComponent 不直接依赖 LoginService 时，这才会起作用，否则 Angular 会提示并说:

**No Provider for LoginService**

在那种情况下，如果你是一个强硬的人并且你仍然不相信使用 LoginModule ，你可以帮助 Angular 并提供 LoginService ，例如:

@NgModule({
  declaration:[LoginComponent],// declaring it 
  providers:[LoginService],// providing it
  imports: [
    RouterModule.forChild(heroesRoutes)
  ]
});

因此，这可能会继续，您可能会发现只导入整个 LoginModule 并让模块本身完成所有工作会更容易。!

LoginModule 就是这样。

---

现在，回答您关于 forChild 的问题。

LoginModule 可能想要在为您提供它的类时做一些额外的事情，这并不总是需要，在这种情况下，您可能已经改进了 LoginModule 并向其添加了一些糖分。

@NgModule({
   declaration:[LoginComponent , LogoutComponent], 
   exports: [LoginComponent , LogoutComponent],
   providers:[LoginService]
})  
export class LoginModule{
  public static logAndLoadModule(message){
     console.log('I first log and then give you my module');
     return {
      ngModule: LoginModule
     }
  }
  public static alertAndLoadModule(message){
      alert('I first alert and then give you my module');
     return {
      ngModule: LoginModule
     }
  }
}

在这种情况下，看起来模块可以在开始给我它的包时记录一些东西。所以我可能会这样使用它:

   @NgModule({
      imports: [
        LoginModule.logAndLoadModule(),
        RouterModule.forChild(heroesRoutes)
      ]
    })

logAndLoadModule 这不是类似于 RouterModule 的 forChild 功能吗？

是的，它仍然为您提供 LoginModule，但它也做了一些额外的事情。

因此您仍然可以导入 LoginModule ，但您也可以使用它的警报和日志。

更新:

export class LoginModule ，意味着当前文件(可能是 login.module.ts 或其他)正在导出一个名为 LoginModule 的类，该类可以从其他文件导入，并且与 Angular 无关，这只是将编译为 javascript 的 typescript 。

在哪里

  @NgModule({
      exports: [
        LoginModulesBrother
      ]
    })
  export class LoginModule{

  }

以上是 Angular2 特定语言，意味着 LoginModule 也在导出 LoginModulesBrother ，所以导入 LoginModule 的人也可以访问 LoginModulesBrother。

因此，LoginModulesBrother 是另一个可能在其他地方定义的模块，例如:

  @NgModule({
      // some other magic here 
  })
  export class LoginModulesBrother{

  }

所以一般来说，导入和导出一个类，它可能只是 typescript (一个模块、一个组件、一个管道、一个简单的函数或任何东西)，但是导出数组和导入数组只是Angular 特定语言，对 typescript 没有任何意义。