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

问题描述

我对Angular2完全陌生，很难理解Angular2中@NgModule 进出口的情况.

以下面的代码为例:

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

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

此外，当我再次导出RouterModule时，文档表示以下内容:

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

那么这是否意味着无论导入上述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并让Module本身完成所有工作更加容易.！

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，但是也可以使用它的警报和日志.

更新:

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

为

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

  }

以上是Angular2专用语言，表示LoginModule也在导出LoginModulesBrother，因此，导入LoginModule的人也可以访问LoginModulesBrother.

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

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

  }

因此，通常情况下，导入和导出类可能只是类型脚本(模块，组件，管道，简单函数或其他任何东西)，而导出数组和导入数组仅特定于角度的语言，对于打字稿没有任何意义.

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.

Take the following code for example-:

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

In the imports section what am I importing ? The router module , or the forChild() function, or the module returned by the function forChild() ? Which one is it ?

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

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.

So does that mean that whatever module imports the above NgModule, will have access to all the code in the RouterModule ?

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.

解决方案

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.

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 could also use some interfaces , for example a UserInterface , which again , would makes sense to be shipped to LoginModule to the consumer.

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 !

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

LoginModule would look like this:

   @NgModule({
      declaration:[LoginComponent , LogoutComponent], 
      exports: [
        LoginComponent , LogoutComponent
      ],
      providers:[LoginService]
    })
    export class 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
  ]
})

BUT :

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)
  ]
})

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**

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)
  ]
});

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 .!

That's it with LoginModule.

---

Now , to answer your question regarding forChild.

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)
      ]
    })

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

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

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

UPDATE:

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.

Where as

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

  }

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.

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

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

  }

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屋！