angular2 - "进口"和"出口"如何在Angular2模块中运行?

ng.*_*bie 23 angular2-routing angular

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

以下面的代码为例:

@NgModule({
  imports: [
    RouterModule.forChild(heroesRoutes)
  ],
  exports: [
    RouterModule
  ]
})
Run Code Online (Sandbox Code Playgroud)

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

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

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

那么这是否意味着无论什么模块导入上面的NgModule,都可以访问RouterModule中的所有代码?

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

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

Mil*_*lad 34

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{

    }
Run Code Online (Sandbox Code Playgroud)

所以在我的AppModule中,我会导入你的LoginModule.

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

但是:

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

@NgModule({
  declaration:[LoginComponent],
  imports: [
    RouterModule.forChild(heroesRoutes)
  ]
})
Run Code Online (Sandbox Code Playgroud)

只有当LoginComponent没有对LoginService有任何直接依赖时,这只会起作用,其他明智的Angular会抱怨并说:

**No Provider for LoginService**
Run Code Online (Sandbox Code Playgroud)

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

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

因此,这可能会继续,您可能会发现导入整个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
     }
  }
}
Run Code Online (Sandbox Code Playgroud)

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

   @NgModule({
      imports: [
        LoginModule.logAndLoadModule(),
        RouterModule.forChild(heroesRoutes)
      ]
    })
Run Code Online (Sandbox Code Playgroud)

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

是的,它仍然给你LoginModule但它也做了一些额外的事情.

所以你仍然可以导入LoginModule,但你也可以使用它的警报和日志.

更新:

导出类LoginModule,意思是,当前文件(可能是login.module.ts或其他)正在导出一个名为LoginModule的类,它可以从其他文件中导入,它与Angular无关,这只是一个将编译为javascript的typescript .

在哪里

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

  }
Run Code Online (Sandbox Code Playgroud)

上面是Angular2特定语言,意味着LoginModule也是导出LoginModulesBrother,所以谁曾经导入LoginModule,也可以访问LoginModulesBrother.

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

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

  }
Run Code Online (Sandbox Code Playgroud)

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


Gün*_*uer 3

如果您使用<router-outlet>组件或routerLinkrouterLinkActive指令,则需要将 添加到RouterModuleimports: []使用其中任何一个的每个模块。

这对于任何指令、组件或管道都是相同的。仅当它们通过导入得知时,Angular 才会在模块中实例化它们。

如果将模块添加到imports: []所有指令,导出中列出的组件和管道将可供导入模块使用。

模块还可以重新导出其他模块,这使得这些模块的所有导出指令、组件和管道可供导入模块使用。

也可以看看