Angular 模块常见问题

Angular模块可以帮我们把应用组织成一些紧密相关的代码块。

Angular模块章涵盖了此概念,并带你从最基本的@NgModule学到惰性加载模块。

这里回答的是开发者常问起的关于Angular模块的设计与实现问题。

本《Angular模块常见问题》假设你已经读完了Angular模块章。

声明(declarations)

导入(imports)

导出(exports)

服务提供商(providers)

入口组件

一般问题

我应该把哪些类加到declarations中?

可声明的类(组件、指令和管道)添加到declarations列表中。

这些类只能在应用程序的一个并且只有一个模块中声明。 只有当它们从属于某个模块时,才能把在模块中声明它们。

什么是可声明的

可声明的就是组件、指令和管道等可以被加到模块的declarations列表中的类。它们也是所有能被加到declarations中的类。

哪些类应该加到declarations中?

只有可声明的类才能加到模块的declarations列表中。

不要声明:

为什么要把同一个组件声明在不同的NgModule属性中?

我们经常看到AppComponent被同时列在declarationsbootstrap中。 我们还可能看到HeroComponent被同时列在declarationsexportsentryComponent中。

看起来是多余的,不过这些函数具有不同的功能,我们无法从它出现在一个列表中推断出它也应该在另一个列表中。

"Can't bind to 'x' since it isn't a known property of 'y'"是什么意思?

这个错误通常意味着你或者忘了声明指令“x”,或者你没有导入“x”所属的模块。

比如,如果这个“x”是ngModel,你可能忘了从@angular/forms中导入FormsModule

也可能你在该应用的特性模块中声明了“x”,但是忘了从那个模块导出它。 除非你把这个“x”类加入了exports列表中,否则它对其它模块将是不可见的。

我应该导入什么?

一句话:导入你需要在当前模块的组件模板中使用的那些公开的(被导出的)可声明类

这意味着要从@angular/common中导入CommonModule才能访问Angular的内置指令,比如NgIfNgFor。 你可以直接导入它或者从重新导出过该模块的其它模块中导入它。

如果你的组件有[(ngModel)]双向绑定表达式,就要从@angular/forms中导入FormsModule

如果当前模块中的组件包含了共享模块和特性模块中的组件、指令和管道,就导入这些模块。

只能在根模块AppModule导入BrowserModule

我应该导入BrowserModule还是CommonModule

几乎所有要在浏览器中使用的应用的根模块AppModule)都应该从@angular/platform-browser中导入BrowserModule

BrowserModule提供了启动和运行浏览器应用的那些基本的服务提供商。

BrowserModule还从@angular/common中重新导出了CommonModule,这意味着AppModule中的组件也同样可以访问那些每个应用都需要的Angular指令,如NgIfNgFor

在其它任何模块中都不要导入BrowserModule特性模块惰性加载模块应该改成导入CommonModule。 它们需要通用的指令。它们不需要重新初始化全应用级的提供商。

如果你在惰性加载模块中导入BrowserModule,Angular就会抛出一个错误。

特性模块中导入CommonModule可以让它能用在任何目标平台上,不仅是浏览器。那些跨平台库的作者应该喜欢这种方式的。

如果我两次导入同一个模块会怎么样?

不会有问题。当三个模块全都导入模块'A'时,Angular只会首次遇到时加载一次模块'A',之后就不会这么做了。

无论A出现在所导入模块的哪个层级,都会如此。 如果模块'B'导入模块'A'、模块'C'导入模块'B',模块'D'导入[C, B, A],那么'D'会触发模块'C'的加载,'C'会触发'B'的加载,而'B'会加载'A'。 当Angular在'D'中想要获取'B'和'A'时,这两个模块已经被缓存过了,可以立即使用。

Angular不允许模块之间出现循环依赖,所以不要让模块'A'导入模块'B',而模块'B'又导入模块'A'。

我应该导出什么?

导出那些其它模块希望在自己的模板中引用的可声明类。这些也是你的公开类。 如果你不导出某个类,它就是私有的,只对当前模块中声明的其它组件可见。

可以导出任何可声明类(组件、指令和管道),而不用管它是声明在当前模块中还是某个导入的模块中。

可以重新导出整个导入过的模块,这将导致重新导出它们导出的所有类。模块甚至还可以导出它未曾导入过的模块。

不应该导出什么?

不要导出:

我可以重新导出类和模块吗?

毫无疑问!

模块是从其它模块中选取类并把它们重新导出成统一、便利的新模块的最佳方式。

模块可以重新导出其它模块,这会导致重新导出它们导出的所有类。 Angular自己的BrowserModule就重新导出了一组模块,例如:

exports: [CommonModule, ApplicationModule]

模块还能导出一个组合,它可以包含自己的声明、某些导入的类以及导入的模块。

不要费心去导出纯服务类。 纯服务类的模块不会导出任何可供其它模块使用的可声明类。 例如,不用重新导出HttpModule,因为它没有导出任何东西。 它唯一的用途是把那些http服务提供商一起添加到应用中。

forRoot方法是什么?

静态方法forRoot是一个约定,它可以让开发人员更轻松的配置模块的提供商。

RouterModule.forRoot就是一个很好的例子。 应用把一个Routes对象传给RouterModule.forRoot,为的就是使用路由配置全应用级的Router服务。 RouterModule.forRoot返回一个ModuleWithProviders对象。 我们把这个结果添加到根模块AppModuleimports列表中。

只能在应用的根模块AppModule中调用并导入.forRoot的结果。 在其它模块中导入它,特别是惰性加载模块中,是违反设计目标的并会导致一个运行时错误。

RouterModule也提供了静态方法forChild,用于配置惰性加载模块的路由。

forRootforChild都是方法的约定名称,它们分别用于在根模块和特性模块中配置服务。

Angular并不识别这些名字,但是Angular的开发人员可以。 当你写类似的需要可配置的服务提供商时,请遵循这个约定。

为什么服务提供商在特性模块中的任何地方都是可见的?

列在引导模块的@NgModule.providers中的服务提供商具有全应用级作用域。 往NgModule.providers中添加服务提供商将导致该服务被发布到整个应用中。

当我们导入一个模块时,Angular就会把该模块的服务提供商(也就是它的providers列表中的内容)加入该应用的根注入器中。

这会让该提供商对应用中所有知道该提供商令牌(token)的类都可见。

Angular就是如此设计的。 通过模块导入来实现可扩展性是Angular模块系统的主要设计目标。 把模块的提供商并入应用程序的注入器可以让库模块使用新的服务来强化应用程序变得更容易。 只要添加一次HttpModule,那么应用中的每个组件就都可以发起Http请求了。

不过,如果你期望模块的服务只对那个特性模块内部声明的组件可见,那么这可能会带来一些不受欢迎的意外。 如果HeroModule提供了一个HeroService,并且根模块AppModule导入了HeroModule,那么任何知道HeroService类型的类都可能注入该服务,而不仅是在HeroModule中声明的那些类。

为什么在惰性加载模块中声明的服务提供商只对该模块自身可见?

和启动时就加载的模块中的提供商不同,惰性加载模块中的提供商是局限于模块的。

当Angular路由器惰性加载一个模块时,它创建了一个新的运行环境。 那个环境拥有自己的注入器,它是应用注入器的直属子级。

路由器把该惰性加载模块的提供商和它导入的模块的提供商添加到这个子注入器中。

这些提供商不会被拥有相同令牌的应用级别提供商的变化所影响。 当路由器在惰性加载环境中创建组件时,Angular优先使用惰性加载模块中的服务实例,而不是来自应用的根注入器的。

如果两个模块提供了同一个服务会怎么样?

当同时加载了两个导入的模块,它们都列出了使用同一个令牌的提供商时,后导入的模块会“获胜”,这是因为这两个提供商都被添加到了同一个注入器中。

当Angular尝试根据令牌注入服务时,它使用第二个提供商来创建并交付服务实例。

每个注入了该服务的类获得的都是由第二个提供商创建的实例。 即使是声明在第一个模块中的类,它取得的实例也是来自第二个提供商的。

如果模块A提供了一个使用令牌'X'的服务,并且导入的模块B也用令牌'X'提供了一个服务,那么模块A中定义的服务“获胜”了。

由根AppModule提供的服务相对于所导入模块中提供的服务有优先权。换句话说:AppModule总会获胜。

我们应该如何把服务的范围限制到模块中?

如果一个模块在应用程序启动时就加载,它的@NgModule.providers具有全应用级作用域。 它们也可用于整个应用的注入中。

导入的提供商很容易被由其它导入模块中的提供商替换掉。 这虽然是故意这样设计的,但是也可能引起意料之外的结果。

作为一个通用的规则,应该只导入一次带提供商的模块,最好在应用的根模块中。 那里也是配置、包装和改写这些服务的最佳位置。

假设模块需要一个定制过的HttpBackend,它为所有的Http请求添加一个特别的请求头。 如果应用中其它地方的另一个模块也定制了HttpBackend或仅仅导入了HttpModule,它就会改写当前模块的HttpBackend提供商,丢掉了这个特别的请求头。 这样服务器就会拒绝来自该模块的请求。

要消除这个问题,就只能在应用的根模块AppModule中导入HttpModule

如果你必须防范这种“提供商腐化”现象,那就不要依赖于“启动时加载”模块的providers

只要可能,就让模块惰性加载。 Angular给了惰性加载模块自己的子注入器。 该模块中的提供商只对由该注入器创建的组件树可见。

如果你必须在应用程序启动时主动加载该模块,就改成在组件中提供该服务

继续看这个例子,假设某个模块的组件真的需要一个私有的、自定义的HttpBackend

那就创建一个“顶级组件”来扮演该模块中所有组件的根。 把这个自定义的HttpBackend提供商添加到这个顶级组件的providers列表中,而不是该模块的providers中。 回忆一下,Angular会为每个组件实例创建一个子注入器,并使用组件自己的providers来配置这个注入器。

当该组件的子组件想要一个HttpBackend服务时,Angular会提供一个局部的HttpBackend服务,而不是应用的根注入器创建的那个。 子组件将正确发起http请求,而不管其它模块对HttpBackend做了什么。

确保把模块中的组件都创建成这个顶级组件的子组件。

你可以把这些子组件都嵌在顶级组件的模板中。或者,给顶级组件一个<router-outlet>,让它作为路由的宿主。 定义子路由,并让路由器把模块中的组件加载进该路由出口(outlet)中。

我应该把全应用级提供商添加到根模块AppModule中还是根组件AppComponent中?

在根模块AppModule中注册全应用级提供商,而不是AppComponent中。

惰性加载模块及其组件可以注入AppModule中的服务,却不能注入AppComponent中的。

只有当该服务必须对AppComponent组件树之外的组件不可见时,才应该把服务注册进AppComponentproviders中。 这是一个非常罕见的异常用法。

更一般地说,优先把提供商注册进模块中,而不是组件中。

讨论

Angular把所有启动期模块的提供商都注册进了应用的根注入器中。 这些服务是由根注入器中的提供商创建的,并且在整个应用中都可用。 它们具有应用级作用域

某些服务(比如Router)只有当注册进应用的根注入器时才能正常工作。

相反,Angular使用AppComponent自己的注入器注册了AppComponent的提供商。 AppComponent服务只在该组件及其子组件树中才能使用。 它们具有组件级作用域

AppComponent的注入器是根注入器的子级,注入器层次中的下一级。 这对于没有路由器的应用来说几乎是整个应用了。 但这个“几乎”对于带路有的应用仍然是不够的。

当有路由时,AppComponent服务并不在根部。 惰性加载的模块就不能用它们。 在“Angular模块”章的范例应用中,如果我们在AppComponent中注册UserService,那么HeroComponent就不能注入它。 一旦用户导航到“Heroes”特性区,该应用就会失败。

我应该把其它提供商注册到模块中还是组件中?

通常,优先把模块中具体特性的提供商注册到模块中(@NgModule.providers),而不是组件中(@Component.providers)。

当你必须把服务实例的范围限制到某个组件及其子组件树时,就把提供商注册到该组件中。 指令的提供商也同样照此处理。

例如,如果英雄编辑组件需要自己私有的缓存英雄服务实例,那么我们应该把HeroService注册进HeroEditorComponent中。 这样,每个新的HeroEditorComponent的实例都会得到一份自己的缓存服务实例。 编辑器的改动只会作用于它自己的服务,而不会影响到应用中其它地方的英雄实例。

总是在根模块AppModule中注册全应用级服务,而不要在根组件AppComponent中。

为什么SharedModule为惰性加载模块提供服务是个馊主意?

这个问题在Angular模块一章的为何UserService不是共享的部分出现过, 那时我们在讨论不要把提供商放进SharedModule的重要性。

假设把UserService列在了模块的providers中(我们没有这么做)。 假设每个模块都导入了这个SharedModule(我们是这么做的)。

当应用启动时,Angular主动加载了AppModuleContactModule

导入的SharedModule的每个实例都会提供UserService。 Angular把它们中的一个注册进了应用的根注入器中(参见如果同一个模块被导入两次会怎么样?)。 然后,某些组件要求注入UserService,Angular就会在应用的根注入器中查找它,并交付一个全应用级的单例对象UserService。这没问题。

现在,该考虑HeroModule了,它是惰性加载的!

当路由器准备惰性加载HeroModule的时候,它会创建一个子注入器,并且把UserService的提供商注册到那个子注入器中。子注入器和根注入器是不同的。

当Angular创建一个惰性加载的HeroComponent时,它必须注入一个UserService。 这次,它会从惰性加载模块的子注入器中查找UserService的提供商,并用它创建一个UserService的新实例。 这个UserService实例与Angular在主动加载的组件中注入的那个全应用级单例对象截然不同。

这绝对是一个错误。

自己验证一下吧。 运行这个在线例子 / 可下载的例子。 修改SharedModule,由它来提供UserService而不再由CoreModule。 然后在“Contact”和“Heroes”链接之间切换几次。 由于Angular每次都创建一个新的UserService实例,所以用户名变得不正常了。

为什么惰性加载模块会创建一个子注入器?

Angular会把@NgModule.providers中的提供商添加到应用的根注入器中…… 除非该模块是惰性加载的,这种情况下,它会创建一子注入器,并且把该模块的提供商添加到这个子注入器中。

这意味着模块的行为将取决于它是在应用启动期间加载的还是后来惰性加载的。如果疏忽了这一点,可能导致严重后果

为什么Angular不能像主动加载模块那样把惰性加载模块的提供商也添加到应用程序的根注入器中呢?为什么会出现这种不一致?

归根结底,这来自于Angular依赖注入系统的一个基本特征: 在注入器还没有被第一次使用之前,可以不断为其添加提供商。 一旦注入器已经创建和开始交付服务,它的提供商列表就被冻结了,不再接受新的提供商。

当应用启动时,Angular会首先使用所有主动加载模块中的提供商来配置根注入器,这发生在它创建第一个组件以及注入任何服务之前。 一旦应用开始工作,应用的根注入器就不再接受新的提供商了。

之后,应用逻辑开始惰性加载某个模块。 Angular必须把这个惰性加载模块中的提供商添加到某个注入器中。 但是它无法将它们添加到应用的根注入器中,因为根注入器已经不再接受新的提供商了。 于是,Angular在惰性加载模块的上下文中创建了一个新的子注入器。

我要如何知道一个模块或服务是否已经加载过了?

某些模块及其服务只能被根模块AppModule加载一次。 在惰性加载模块中再次导入这个模块会导致错误的行为,这个错误可能非常难于检测和诊断。

为了防范这种风险,我们可以写一个构造函数,它会尝试从应用的根注入器中注入该模块或服务。如果这种注入成功了,那就说明这个类是被第二次加载的,我们就可以抛出一个错误,或者采取其它挽救措施。

某些Angular模块(例如BrowserModule)就实现了一个像 Angular 模块那一章的CoreModule构造函数那样的守卫。

src/app/core/core.module.ts (Constructor)

constructor (@Optional() @SkipSelf() parentModule: CoreModule) {
  if (parentModule) {
    throw new Error(
      'CoreModule is already loaded. Import it in the AppModule only');
  }
}

什么是入口组件

Angular根据其类型不可避免地加载的组件是入口组件

而通过组件选择器声明式加载的组件则不是入口组件。

大多数应用组件都是声明式加载的。 Angular使用该组件的选择器在模板中定位元素,然后创建表现该组件的HTML,并把它插入DOM中所选元素的内部。它们不是入口组件。

也有少量组件只会被动态加载,并且永远不会被组件的模板所引用。

用于引导的根AppComponent就是一个入口组件。 虽然它的选择器匹配了index.html中的一个元素,但是index.html并不是组件模板,而且AppComponent选择器也不会在任何组件模板中出现。

Angular总是会动态加载AppComponent —— 无论把它的类型列在了@NgModule.bootstrap函数中,还是命令式的调用该模块的ngDoBootstrap方法来引导它。

在路由定义中用到的组件也同样是入口组件。 路由定义根据类型来引用组件。 路由器会忽略路由组件的选择器(即使它有选择器),并且把该组件动态加载到RouterOutlet中。

编译器无法通过在其它组件的模板中查找来发现这些入口组件。 我们必须通过把它们加入entryComponents列表中来让编译器知道它们的存在。

Angular会自动把下列类型的组件添加到模块的entryComponents中:

我们并不需要显式的引用这些组件 —— 虽然引用了也没坏处。

What's the difference between a bootstrap component and an entry component?

引导组件入口组件有什么不同?

引导组件是入口组件的一种。 它是被Angular的引导(应用启动)过程加载到DOM中的入口组件。 其它入口组件则是被其它方式动态加载的,比如被路由器加载。

@NgModule.bootstrap属性告诉编译器这是一个入口组件,同时它应该生成一些代码来用该组件引导此应用。

不需要把组件同时列在bootstrapentryComponent列表中 —— 虽然这样做也没坏处。

When do I add components to entryComponents?

什么时候我应该把组件加到entryComponents中?

大多数应用开发者都不需要把组件添加到entryComponents中。

Angular会自动把恰当的组件添加到入口组件中。 列在@NgModule.bootstrap中的组件会自动加入。 由路由配置引用到的组件会被自动加入。 用这两种机制添加的组件在入口组件中占了绝大多数。

如果你的应用要用其它手段来根据类型引导或动态加载组件,那就得把它显式添加到entryComponents中。

虽然把组件加到这个列表中也没什么坏处,不过最好还是只添加真正的入口组件。 不要添加那些被其它组件的模板引用过的组件。

Why does Angular need entryComponents?

为什么Angular需要入口组件

入口组件也是被声明的。 为什么Angular编译器不为@NgModule.declarations中的每个组件都生成一份代码呢?那样就不需要入口组件了。

原因在于摇树优化。对于产品化应用,我们希望加载尽可能小而快的代码。 代码中应该仅仅包括那些实际用到的类。 它应该排除那些我们从未用过的组件,无论该组件是否被声明过。

事实上,大多数库中声明和导出的组件我们都用不到。 如果我们从未引用它们,那么摇树优化器就会从最终的代码包中把这些组件砍掉。

如果Angular编译器为每个声明的组件都生成了代码,那么摇树优化器的作用就没有了。

所以,编译器转而采用一种递归策略,它只为我们用到的那些组件生成代码。

编译器从入口组件开始工作,为它在入口组件的模板中找到的那些组件生成代码,然后又为在这些组件中的模板中发现的组件生成代码,以此类推。 当这个过程结束时,它就已经为每个入口组件以及从入口组件可以抵达的每个组件生成了代码。

如果该组件不是入口组件或者没有在任何模板中发现过,编译器就会忽略它。

What kinds of modules should I have and how should I use them?

有哪些类型的模块?我应该如何使用它们?

每个应用都不一样。根据不同程度的经验,开发者会做出不同的选择。一些建议和向导具有更加广泛的吸引力。

下面这些初步的指南仅来自在少量应用中使用Angular模块时的早期体验。 仅供参考。

SharedModule

为那些可能会在应用中到处使用的组件、指令和管道创建SharedModule。 这种模块应该只包含declarations,并且应该导出几乎所有declarations里面的声明。

SharedModule可以重新导出其它小部件模块,比如CommonModuleFormsModule和提供你广泛使用的UI控件的那些模块。

SharedModule不应该带有providers,原因在前面解释过了。 它的导入或重新导出的模块中也不应该有providers。 如果你要违背这条指导原则,请务必想清楚你在做什么,并要有充分的理由。

在任何特性模块中(无论是你在应用启动时主动加载的模块还是之后惰性加载的模块),你都可以随意导入这个SharedModule

CoreModule

为你要在应用启动时加载的那些服务创建一个带providersCoreModule

只能在根模块AppModule中导入CoreModule。 永远不要在除根模块AppModule之外的任何模块中导入CoreModule

考虑把CoreModule做成一个没有declarations纯服务模块

这里的范例违背了此建议,它声明和导出了两个只用在AppModule模块的AppComponent组件中的组件。 如果你想严格遵循这条指南,应该把这两个组件改为声明在AppModule中。

特性模块

围绕特定的业务领域、工作流和工具集来为应用创建特性模块

特性模块一般可分成下面这几种:

真实世界中的模块通常会偏离这些指导原则,而混杂多种不同的类型。 这些只是指导原则,不是硬性要求。 但除非你有充分的理由不这么做,最好还是遵循它们。

特性模块

指导原则

领域

领域特性模块专注于一个特定的应用领域来提供用户体验,比如编辑消费者信息或下订单。

它们通常有一个顶级组件,并作为该特性的根组件。 内部则是它的一些子组件。

领域特性模块几乎总是由declarations构成。只有顶级组件会被导出。

领域特性模块很少会有providers。 如果要这么做,那它们所提供服务的生命周期就应该与该模块的生命周期相同。

不要在领域特性模块中提供全应用级的单例服务。

领域特性模块的典型用法是只被更大的特性模块导入一次

对于缺少路由的小型应用,它们可能只会被根模块AppModule导入一次。

比如Angular模块章的ContactModule

路由特性模块

路由特性模块属于领域特性模块的一种,它的顶层组件是路由器导航时的路由目标

根据这个定义,所有惰性加载的模块都是路由特性模块。

这里的ContactModuleHeroModuleCrisisModule都是路由特性模块。

路由特性模块不应该导出任何东西,这是因为它们中的任何组件都不可能出现在外部组件的模板中。

惰性加载的路由特性模块也不应该被任何模块导出。 那么做会触发一次主动加载,破坏了我们惰性加载的目的。 HeroModuleCrisisModule是惰性加载的。它们没有出现在AppModuleimports中。

而主动加载的路由特性模块必须被其它模块导入,以便编译器了解它有哪些组件。 ContactModule就是主动加载的,因此它也被列在了AppModuleimports中。

路由特性模块很少会有providers,理由前面解释过。 如果要那么做,它所提供的服务就应该与模块具有相同的生命周期。

不要在路由特性模块及其导入的模块中提供全应用级的单例服务。

路由模块

路由模块为其它模块提供路由配置

路由模块将路由配置从它的关联模块分离开来。

路由模块通常会做这些:

  • 定义路由。

  • 添加路由配置到模块的imports中。

  • 重新导出RouterModule

  • 添加守卫和解析器服务提供商到模块的providers

路由模块的名字应该和它的关联模块平行,比如使用“Routing”前缀, foo.module.ts中的FooModule有名为FooRoutingModule的路由模块,所属文件名为foo-routing.module.ts

如果关联模块是AppModule,那么在AppRoutingModuleimports中,添加RouterModule.forRoot(routes)来配置路由。 所有其它路由模块都是子级,导入RouterModule.forChild(routes)

路由模块顺便重新导出RouterModule,这样关联模块的组件可以访问路由指令,比如RouterLinkRouterOutlet

路由模块不应该有自己的declarations。组件、指令和管道是特性模块的责任,不属于路由模块。

路由模块应该被它的关联模块导入。

AppRoutingModuleContactRoutingModule和`HeroRoutingModule是很好的例子。

服务

服务模块用于提供工具类服务,比如数据访问和消息等。

理想情况下,它们应该完全由providers组成,不应该包括declarationsCoreModule和Angular的HttpModule就是很好的例子。

服务模块应该只被根模块AppModule导入。

不要在任何特性模块中导入它们。 如果你要违背这条指导原则,请务必想清楚你在做什么,并要有充分的理由。

窗口部件

窗口部件模块导出能用供外部模块使用的组件、指令和管道

CommonModuleSharedModule都是窗口部件模块。 很多第三方UI组件库都是窗口部件模块。

部件模块应该只有declarations,并导出里面的绝大多数声明。

窗口部件模块很少会有providers。 如果你要违背这条指导原则,请务必想清楚你在做什么,并要有充分的理由。

如果任何模块的组件模板中需要用到这些窗口部件,就请导入相应的窗口部件模块。

下表是对各种特性模块的关键特征汇总。

真实世界中的模块可能会违背这些分类法,混杂使用它们。

特性模块

声明`declarations`

提供商`providers`

导出什么

被谁导入

范例

领域

罕见

顶级组件

特性模块和AppModule

ContactModule(路由之前的那个例子)

路由

罕见

ContactModuleHeroModuleCrisisModule

路由

AppModule

AppModule

HttpModuleCoreModule

服务

AppModule

AppModule

HttpModuleCoreModule

窗口部件

罕见

特性模块

CommonModuleSharedModule

What's the difference between Angular and JavaScript Modules?

Angular模块和JavaScript模块有什么区别?

Angular和JavaScript是两种不同但互补的模块体系。

在现代JavaScript中,每个文件都是模块(参见模块)。 在每个文件中,我们写一个export语句将模块的一部分公开。

export class AppComponent { ... }

然后,我们可以在其它模块中import那部分:

import { AppComponent }  from './app.component';

这种模块化方式是JavaScript语言中的特性。

Angular模块Angular本身的特性。

Angular的NgModule也有自己的importsexports来达到类似的目的。

我们可以导入其它Angular模块,以便在当前模块的组件模板中使用它们导出的类。 我们可以导出当前Angular模块中的类,以便其它模块可以导入它们,并用在自己的组件模板中。

Angular的模块类与JavaScript的模块类有三个主要的不同点:

Angular模块还有些别的特殊之处。 不同于JavaScript模块,Angular模块可以通过把服务提供商添加到@NgModule.providers数组中来扩展整个应用提供的服务。

这些提供的服务不仅仅从属于当前模块,其作用范围也不局限于模块中声明的类。它们在哪里都能用。

这里是一个带有importsexportsdeclarationsAngular模块类。

@NgModule({
  imports:      [ CommonModule, FormsModule ],
  declarations: [ ContactComponent, HighlightDirective, AwesomePipe ],
  exports:      [ ContactComponent ],
  providers:    [ ContactService ]
})
export class ContactModule { }

当然,我们同样得用JavaScript模块来写Angular模块,就像在最终版contact.module.ts文件中所见到的:

src/app/contact/contact.module.ts

import { NgModule }           from '@angular/core';
import { CommonModule }       from '@angular/common';
import { FormsModule }        from '@angular/forms';

import { AwesomePipe }        from './awesome.pipe';

import
       { ContactComponent }   from './contact.component';
import { ContactService }     from './contact.service';
import { HighlightDirective } from './highlight.directive';

@NgModule({
  imports:      [ CommonModule, FormsModule ],
  declarations: [ ContactComponent, HighlightDirective, AwesomePipe ],
  exports:      [ ContactComponent ],
  providers:    [ ContactService ]
})
export class ContactModule { }

Angular 如何查找模板中的组件、指令和管道?什么是 模板引用

Angular编译器在组件模板内查找其它组件、指令和管道。一旦找到了,那就是一个“模板引用”。

Angular编译器通过在一个模板的HTML中匹配组件或指令的选择器(selector),来查找组件或指令。

编译器通过分析模板HTML中的管道语法中是否出现了特定的管道名来查找对应的管道。

Angular只查询两种组件、指令或管道:1)那些在当前模块中声明过的,以及2)那些被当前模块导入的模块所导出的。

What is the Angular compiler?

什么是Angular编译器?

Angular编译器会把我们所写的应用代码转换成高性能的JavaScript代码。 在编译过程中,@NgModule的元数据扮演了很重要的角色。

我们写的代码是无法直接执行的。 比如组件。 组件有一个模板,其中包含了自定义元素、属性型指令、Angular绑定声明和一些显然不属于原生HTML的古怪语法。

Angular编译器读取模板的HTML,把它和相应的组件类代码组合在一起,并产出组件工厂

组件工厂为组件创建纯粹的、100% JavaScript的表示形式,它包含了@Component元数据中描述的一切:HTML、绑定指令、附属的样式等……

由于指令管道都出现在组件模板中,Angular编译器*也同样会把它们组合到编译成的组件代码中。

@NgModule元数据告诉Angular编译器要为当前模块编译哪些组件,以及如何把当前模块和其它模块链接起来。

NgModule API

下面是NgModule元数据中属性的汇总表:

属性

描述

declarations

可声明类的列表,也就是属于当前模块的组件指令管道类。

这些声明的类对组件内部可见,但是对其它模块不可见,除非 (a) 这些类从当前模块中导出过,并且 (b) 其它模块导入了当前模块。

组件、指令和管道只能属于一个模块。 如果尝试把同一个类声明在多个模块中,编译器就会报告一个错误。

不要重新声明从其它模块中导入的类。

providers

依赖注入提供商的列表。

Angular会在当前模块执行环境的根注入器中注册这些提供商。 那是应用程序在启动时为其加载的所有模块提供的根注入器。

Angular可以把这些提供商提供的服务注入到应用中的任何组件中。 如果该模块提供了HeroService或启动时被加载的任何模块提供了HeroService,那么Angular就会把同一个HeroService实例注入到应用中的任何组件中。

惰性加载模块有自己的子注入器,通常它是应用的根注入器的直接子级。

惰性加载的服务,其作用范围仅限于惰性加载模块的注入器中。 如果惰性加载的模块也提供了HeroService,那么在该模块的环境中创建的任何组件(比如通过路由器导航),都会得到该服务的一个局部实例,而不是来自应用程序根注入器的那个全局实例。

外部模块中的组件仍然会取得由应用的根注入器创建的那个实例。

imports

支撑模块的列表。

特别是包含当前模块中的组件模板引用过的组件、指令或管道的那些模块的列表。

在两种情况下组件模板可以引用其它组件、指令或管道:或者所引用的类是声明在当前模块中的,或者那个类已经从其它模块中导入进来了。

组件可以使用NgIfNgFor指令,只是因为它所在的模块导入了Angular的CommonModule(也可能是通过导入BrowserModule而间接导入的)。

通过CommonModule,我们可以导入很多标准指令。 但是也有一些熟悉的指令是属于其它模块的。 比如组件只有导入了Angular的FormsModule才能在组件模板中用[(ngModel)]进行绑定。

exports

可供导入了自己的模块使用的可声明对象(组件指令管道类)的列表。

这些导出的可声明对象就是模块的公开API。 如果 (a) 其它模块导入了当前模块,并且 (b) 当前模块导出了HeroComponent, 那么其它模块中的组件就可以引用来自当前模块的HeroComponent

可声明对象默认情况下是私有的。 如果当前模块没有导出HeroComponent,那么没有任何其它模块能看到它。

导入一个模块并不会自动重新导出这个模块导出的东西。 模块'B'即使导入了模块A,而模块A中导入过CommonModule,它也没法使用NgIf。模块B必须自己导入CommonModule

一个模块可以把另一个模块加入自己的exports列表中,这时,另一个模块的所有公开组件、指令和管道都会被导出。

重新导出可以让模块的传递性更加明确。 如果模块A重新导出了CommonModule,然后模块B导入了模块A,那么模块B中的组件就能使用NgIf了,虽然模块B本身并没有导入过CommonModule

bootstrap

能被引导的组件列表。

通常,在这个列表中只有一个组件,也就是应用的根组件

Angular也可以引导多个引导组件,它们每一个都在宿主页面中有自己的位置。

引导组件会自动成为entryComponent

entryComponents

那些没有在任何可访问的组件的模板中引用过的组件列表。

大多数开发人员从来没有设置过该属性。Angular编译器必须知道在应用中实际用过的每一个组件。 通过遍历组件模板中的引用树,编译器可以自动找出大多数的组件。

但是至少有一个组件不会被任何模板引用:根组件AppComponent,因为我们就是用它来引导本应用程序的。 这也就是为什么它被称为入口组件

路由组件同样是入口组件,因为它们也不会被从模板中引用。 路由器创建会它们,并把它们扔到DOM中的<router-outlet>

引导组件路由组件都是入口组件,我们一般不用再把它们添加到模块的entryComponents列表中。

Angular会自动把模块的bootstrap列表中的组件添加到entryComponents列表中。 RouterModule同样会把路由组件添加到entryComponents列表中。

这样,那些无法自动发现的组件就只剩下这些来源了:

  • 使用某种命令式技巧引导的组件。

  • 使用路由器之外的手段动态加载到DOM中的组件。

所有这些高级技巧是只有极少数开发人员才会去用的。 如果你是其中的一位,那么你就不得不自行把这些组件添加到entryComponents列表中 —— 无论是用程序添加还是手动添加。