angular2 – “进口”和“出口”如何在Angular2模块中运行？

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

以下面的代码为例：

@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。我的比喻是否正确？

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

Angular2中的模块与Angular1模块非常相似，Angular1模块基本上是一个包含所有可以一起发货的零碎的包。

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

LoginService也可以使用一些接口，例如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,exports: [LoginComponent,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，但你也可以使用它的警报和日志。

更新：

导出类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{

  }

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

angular2 – “进口”和“出口”如何在Angular2模块中运行？

相关推荐