angular2 - Angular2 模块中的“导入"和“导出"如何工作? [英] angular2 - How do 'imports' and 'exports' work in Angular2 modules?

问题描述

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

I am completely new to Angular2 and it has been very difficult to understand what is going on with the @NgModule imports and exports in Angular2.

以下面的代码为例-:

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

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

此外，当我再次导出 RouterModule 时，文档 说明如下-:

Also when I export the RouterModule again, the documentation says the following-:

我们的最后一步是重新导出 RouterModule.通过重新导出RouterModule，我们的特性模块将随路由器一起提供使用我们的路由模块时的指令.

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.我的比喻正确吗?

Is it sort of like if I write a custom header file in C that includes math.h, if I now use that header file I no longer need to include math.h in my programme separately. Is my analogy correct ?

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

Can someone explain the core concepts here, so that I don't get stumped every time I see new code.

推荐答案

Angular2 中的模块与 Angular1 模块非常相似，它基本上是一个包含所有可以一起发布的点点滴滴的包.

A Module in Angular2 is very similar to the Angular1 modules , which basically is a package containing all the bits and pieces that makes sense to be shipped together.

>

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

For example , if you have a LoginComponent which for some reasons is connected to a Service , which is LoginService, which does some http request to get some user information , you might create a LoginModule which ships LoginComponent and LoginService all together as LoginModule.

LoginService 也可以使用一些接口，例如 UserInterface，再次将其发送到 LoginModule 给消费者是有意义的.

LoginService could also use some interfaces , for example a UserInterface , which again , would makes sense to be shipped to LoginModule to the consumer.

因此，如果我是您的客户并且我将使用您的常规登录功能，那么我只需导入您的 LoginModule 和您的 AppComponent 可用的所有好东西就容易多了！

So if I'm your client and I'm going to use your general Login functionality , would makes it much easier for me to just import your LoginModule and all your goodies available to my AppComponent !

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

So , your LoginModule class ( which is nothing but a simple javascript file and a function ) should export LoginModule to be used by me :).

LoginModule 看起来像这样:

LoginModule would look like this:

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

    }

所以在我的 AppModule 中，我会导入您的 LoginModule.

So in my AppModule , I would import your LoginModule.

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

但是:

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

If I know your code and I don't want any of your extra functions and components and classes and things and I just need to use your LoginComponent , I might prefer to only declare that I'm using LoginComponent and I don't want to import your massive LoginModule !

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

这仅在 LoginComponent 对 LoginService 没有任何直接依赖时才有效，否则 Angular 会抱怨并说:

This would only and only work if LoginComponent does not have any direct dependency on LoginService , other wise Angular would complain and say :

**No Provider for LoginService**

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

Which in that case , if you're a tough person and you're still not convinced to use LoginModule , you can help Angular and provide the LoginService like :

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

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

So , this might continue and you might find it easier to just import the whole LoginModule and let the Module itself do all of the job .!

LoginModule 就是这样.

That's it with LoginModule.

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

Now , to answer your question regarding forChild.

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

The LoginModule might want to do some extra things when giving you it's classes which is not always needed , in that case you might have improved the LoginModule and added some sugar to it.

@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
     }
  }
}

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

Which , in this case , looks like the module can log something when it starts giving me it's package . So I might use it like this:

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

logAndLoadModule 这不是类似于 RouterModule 的 forChild 函数吗?

Isn't logAndLoadModule this similar to forChild function of RouterModule ?

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

Yes it is , it still gives you LoginModule but it does some extra thing as well.

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

So you can still import LoginModule , but you can use it's alert and log as well.

更新:

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

export class LoginModule , means , the current file ( probably login.module.ts or whatever ) is exporting a class called LoginModule which can be imported from other files and it has nothing to do with Angular , this is only typescript which will compile to javascript.

在哪里

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

  }

以上是 Angular2 特定语言，表示 LoginModule 也导出 LoginModulesBrother ，所以导入 LoginModule 的人也可以访问 LoginModulesBrother.

Above is Angular2 specific language and means LoginModule is also Exporting LoginModulesBrother , so who ever is importing LoginModule , has also have access to to LoginModulesBrother.

所以， LoginModulesBrother 是另一个模块，它可能在其他地方定义，如:

So , LoginModulesBrother , is another module which is probably defined somewhere else like :

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

  }

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

So generally , import and export a class , which could be what ever ( a Module a component a pipe a simple function or anything ) is only typescript , but that exports array and imports array is only Angular specific language and means nothing to typescript .

这篇关于angular2 - Angular2 模块中的“导入"和“导出"如何工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！