我对Angular2完全陌生,很难理解Angular2中@NgModule 导入和导出的情况。

以以下代码为例:

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

导入部分中,我要导入什么? 路由器模块或forChild()函数,或由功能forChild()返回的模块?
哪一个 ?

另外,当我再次导出RouterModule时,documentation表示以下内容:



那么这是否意味着无论模块导入了上述NgModule,都将有权访问RouterModule中的所有代码?

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

有人可以在这里解释核心概念吗,这样我每次看到新代码时都不会感到困惑。

最佳答案

Angular2中的Module与Angular1模块非常相似,后者基本上是一个包装,其中包含所有有意义的零碎组件。

例如,如果您有一个因某种原因而连接到Service的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并让Module本身完成所有工作更加容易。

LoginModule就是这样。

现在,回答有关子的的问题。

在为您提供并非总是需要的类时,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)
      ]
    })

RouterModule的Child
函数的 logAndLoadModule 类似于吗?

是的,它仍然为您提供LoginModule,但它还做一些额外的事情。

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

更新:

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

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

  }

上面是Angular2特定的语言,这意味着LoginModule也在导出LoginModulesBrother,因此,导入LoginModule的人也可以访问LoginModulesBrother。

因此,LoginModulesBrother是另一个模块,它可能在其他地方定义,例如:
  @NgModule({
      // some other magic here
  })
  export class LoginModulesBrother{

  }

因此,一般来说,导入和导出可能是什么(模块,组件,管道,简单函数或其他任何东西)仅是 typescript ,但是导出数组和导入数组仅是Angular特定语言,对于 typescript 没有任何意义。

10-04 12:15