Angular NgModule 作用域相关问题

14

NgModule 是你使用 Angular 编写应用程序时遇到的第一个基本结构,但由于涉及不同的作用域范围,它也是最微妙和最复杂的。如果你想详细了解 NgModule 的相关知识,可以直接参考 Angualr NgModule FAQAngular FAQ 文章中 NgModule 版块的内容 。

Why NgModule?

我们可以使用 Angular CLI,自动完成很多工作,但我们必须要做的第一件事就是加载根模块。

platformBrowserDynamic().bootstrapModule(AppModule);

NgModule 的目的是声明我们在 Angular 模块中创建的内容,主要有以下两种结构:

  • declarations - 声明模板中使用的内容,大部分是组件,也包括指令和管道。

  • providers - 用于声明服务。

import { NgModule } from '@angular/core';

import { SomeComponent } from './some.component';
import { SomeDirective } from './some.directive';
import { SomePipe } from './some.pipe';
import { SomeService } from './shared/some.service';

@NgModule({
  declarations: [SomeComponent, SomeDirective, SomePipe],
  providers: [SomeService]
})
export class SomeModule {}

NgModule 是 Angular RC 阶段新增的一个功能,因为 ES 6 中已经新增 import/export 功能,在引入 NgModule 似乎增加了不必要的复杂性。但引入了 NgModule 让我们可以使用 AOT 编译,这大大提高了应用的性能。在 Angular 2 早期 Beta 版本中,我们的组件在使用指令时,都必须每次导入相应的指令,这大大增加开发成本。

NgModule and scopes/visibility

declarationsproviders 属性最令人困惑的是,它们没有相同的作用域和可见性 (scope / visibility):

  • declarations / components 是本地作用域 (private visibility)

  • providers / services 是全局作用域 (public visibility)

这意味着你声明的组件只能在当前模块中使用。如果你想要在外面使用声明的组件,你必须导出它们:

import { NgModule } from '@angular/core';

import { SomeComponent } from './some.component';
import { SomeDirective } from './some.directive';
import { SomePipe } from './some.pipe';

@NgModule({
  declarations: [SomeComponent, SomeDirective, SomePipe],
  exports: [SomeComponent, SomeDirective, SomePipe]
})
export class SomeModule {}

反之,模块中的声明的服务,我们可以在所有模块中使用。

When to import a NgModule?

components 和 services 拥有不同的作用域,了解这个区别很重要。如果我们的应用程序不仅仅包含一个模块,事情可能会变得很糟糕。Angular 框架内部也拆分成多个不同的模块,如 core、common、http 等等。

在 Angular 模块中我们需要做的一件主要的事情是导入其它模块:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HttpModule } from '@angular/http';

import { FeatureModule } from '../feature/feature.module';

@NgModule({
  imports: [CommonModule, HttpModule, FeatureModule]
})
export class SomeModule {}

现在的主要问题是,你必须知道为什么需要导入这些模块:

  • 为了使用导入模块中声明的组件、指令或管道?

  • 为了使用模块中定义的服务?

因为组件和服务,拥有不同的作用域:

  • 如果我们需要在模块中使用导入模块中声明的组件,那我们需要在每个使用的模块中导入对应的模块

  • 如果我们只是使用模块中定义的服务,那我们只需要在主模块中导入对应的模块

如果你不了解这些区别,你可能由于忘记导入某个模块,而出现组件不可用的错误。或者你为了使用某个模块中定义的服务,而多次导入同一个模块。

When to import main Angular Modules?

Modules to import each time you need them

  • CommonModule (包含 Angular 中定义的内建指令,如 ngIf、ngFor 等),除了在主模块之外,不需要导入,因为我们已经在主模块中导入了 BrowserModule (此模块已导入了 CommonModule)。其它模块都必须手动导入该模块。

  • FormsModule / ReactiveFormsModule

  • BrowserAnimationsModule

  • FlexLayoutModule

  • MaterialModule 和 UI Modules (如 PrimeNg)

  • Other Modules (定义 components、directives 或 pipes)

Modules to import only once

  • HttpModule

  • Other Modules (仅提供服务)

The ShareModule good practice

若使用 Angular CLI 创建新的模块,它会自动帮我们导入 CommonModule。如果你需要使用与组件相关的模块如 animations 、flex layout 或 Material 模块,你必须每次手动导入上述模块。因此一个好的实践是创建 SharedModule 模块。

管理 SharedModule 时,需要很小心。如果你只是导入模块,它将无法正常工作:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FlexLayoutModule } from '@angular/flex-layout';
import { MaterialModule } from '@angular/material';

@NgModule({
  imports: [CommonModule, FlexLayoutModule, MaterialModule]
})
export class SharedModule {}

为什么呢?原因仍是作用域的问题:组件只在 SharedModule 中可用,在其它导入 SharedModule 的模块中,仍然是不可用的。因此我们需要导出相应的组件:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FlexLayoutModule } from '@angular/flex-layout';
import { MaterialModule } from '@angular/material';

@NgModule({
  imports: [CommonModule, FlexLayoutModule, MaterialModule],
  exports: [CommonModule, FlexLayoutModule, MaterialModule]
})
export class SharedModule {}

如果我们组件不包含其它共享的资源,我们可以省略 imports 属性:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FlexLayoutModule } from '@angular/flex-layout';
import { MaterialModule } from '@angular/material';

@NgModule({
  exports: [CommonModule, FlexLayoutModule, MaterialModule]
})
export class SharedModule {}

Mixed NgModule

如何同时管理具有组件和服务的模块?这是一个比较复杂的问题。你可能已经接触过 RouterModule,该模块不仅提供了 <router-outlet>routerLink 指令,而且还提供了 ActivedRouter 服务 (用于获取 URL 参数)、Router 服务 (用于页面导航) 。

幸运的是,这个问题是由模块本身来解决。 Angular CLI 会为我们自动生成路由文件,但你可能已经注意到,应用程序主模块的路由和子模块路由之间存在细微差别。

对于 AppModule,我们这样使用:

RouterModule.forRoot(routes)

对于子模块,我们这样使用:

RouterModule.forChild(routes)

为什么呢?因为在 AppModule 中,forRoot() 方法会导入路由模块中的指令和服务。但对于子模块来说,forChild() 方法仅会导入路由模块中定义的指令,而不会再次导入模块中定义的服务。

Lazy-loaded modules

如果你需要实现模块懒加载,可以简单地使用 Angular CLI 来实现:

const routes: Routes = [
  { path: 'admin', loadChildren: './admin/admin.module#AdminModule' }
];

因为它将是一个不同的包和模块,默认情况下是按需加载,它不会包含在您的应用程序的全局范围内。

对于组件来说,你不需要更改任何内容:就像在任何子模块中一样,你需要再次导入 CommonModule 或 SharedModule 模块。

但对于服务来说,有一些区别:

  • 你仍然可以访问应用程序中提供的服务 (如Http和已定义的服务)。

  • 延迟加载模块中定义的服务,只能在延迟加载的模块中使用,应用程序的其它模块是无法使用的。

参考资源


如果觉得我的文章对你有用,请随意赞赏

你可能感兴趣的

viola · 2018年05月03日

如果使用懒加载定义了路由,又在SharedModule 和 AdminModule的route文件中定义了入口组件,在AdminModule中import 模块SharedModule时会出现SharedModule 的入口组件覆盖AdminModule的入口组件的问题,想问这个该怎么解决?

回复

心会变爱不变 · 2018年09月03日

如果在路由中有2个模块都使用了懒加载。这时候这2个模块都引入sharedModule,sharedModule导出了且declarations了一个公用组件,这时候就会报错。说这个公用组件在这2个模块中都被declarations了,请问这个怎么处理。

回复

载入中...