我对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 没有任何意义。