在 Angular 模块中声明组件

2019-03-27 08:00:00 · 飞浪

Angular 模块是应用程序特定部分所需的所有组件的声明。

介绍

Angular 模块可以看作是我们应用程序任何部分中将使用/需要的所有内容的声明。让我们看看 AppModule 里面有什么。AppModule 由 Angular CLI 生成，它包含工作应用程序外壳所需的一切：

      //app.module.ts
import {NgModule} from '@angular/core';
import {BrowserModule} from '@angular/platform-browser';
import {AppComponent} from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}
    

这里，@NgModule 注解的使用实际上定义了我们的模块。

此外，模块本质上是我们应用程序某个部分中将使用的所有内容的声明，AppModule 也是我们声明整个应用程序的部分。

让我们详细了解一下 AppModule 内部的内容。在这里，我们告诉整个应用程序需要使用什么。首先，我们声明我们的 AppComponent。我们应用程序中的每个组件都需要在 Angular 模块内声明，以供我们使用。我们还导入了 BrowserModule。根据 Angular 的官方文档，浏览器模块实际上是我们浏览器的 ng 模块。因此，我们可以将其视为浏览器和应用程序之间的中间人。我们可以在“declarations”数组中列出属于模块的组件、指令和管道。我们可以通过将其他模块添加到“imports”数组来导入它们。我们可以在“providers”数组中列出属于我们模块的所有服务。 bootstrap 属性提供了应用于我们应用程序入口点的组件列表。最有可能的是，它在数组中只有一个元素，即我们应用程序的根组件。它告诉引导方法应该引导哪个组件（上面例子中的 AppComponent）。

现在，我们可以看到，我们已经使用 AppModule 声明了应用程序所需的所有东西。一段时间后，随着应用程序的增长，我们可能需要声明其他东西。但从高层次来看，这就是基本应用程序定义模块的方式。

为什么我们需要 Angular 模块？

好吧，Angular 模块允许我们定义编译模板的上下文。例如，当 Angular 解析 HTML 模板时，它本质上会查找特定的组件/指令/管道列表。实际上，每个 HTML 标签都会与此列表进行比较，以确定是否应应用任何组件，并对每个属性进行类似检查。现在，Angular 如何知道在解析 HTML 时应该查找哪些组件/指令/管道？

这就是 Angular 模块的作用所在。它们负责在单一地方提供这些信息。

因此，关于 Angular 模块可以说以下内容：

无论是即时编译还是提前编译，这些对于解析模板都是必需的。
它们充当将相关功能分组在一起的文档。

Angular 模块与 ES6 模块有何不同？

Angular 模块与 ES6 模块有很大不同。ES6 模块是 JS 社区多年来一直使用的典型 Javascript 模块的标准化。它们允许您将私有细节包装在闭包中，并且仅公开公共 API。

Angular 模块主要用于为模板提供编译上下文，但它也为部分功能定义了公共 API，并有助于我们应用程序的依赖注入配置。

什么是根模块？

每个应用都只有一个根模块。此外，每个组件、指令和管道都只与一个模块关联。

下面是应用程序根模块的示例；

      import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent, MyCustomComponent, MyCustomDirective, MyCustomPipe],
  imports: [BrowserModule],
  providers: [MyUserService, MyOtherService],
  bootstrap: [AppComponent]
})
export class AppModule {
}
    

有几件事可以将上述内容标识为根模块：

根模块遵循AppModule的常规命名。
Web 应用程序的根模块通常导入 BrowserModule，它提供特定于浏览器的渲染器，并安装核心指令，如 ngIf、ngFor、ngSwitch 等。
上面使用了“bootstrap”属性，它提供了应用作为应用程序引导入口点的组件列表。理想情况下，它只包含应用程序的根组件。

功能、共享模块和核心模块的使用

根据我们应用程序的大小和复杂程度，我们可能只需使用 AppModule 即可进行所有声明。但是，对于较大的应用程序，建议使用核心、共享和功能模块。这将使我们正确分离关注点，并帮助我们在应用程序增长时管理可伸缩性。让我们详细了解每种类型的模块：

功能模块功能模块主要扩展我们的全局应用程序，是一个将所有内容封装在单个区域内的模块。理想情况下，应用程序应该有多个功能模块。我们可以将它们视为整个应用程序的一部分的迷你独立应用程序。功能代表我们所谓的“部分”。它通常包含一个根组件，它会导出并由父模块使用。该功能的其余部分将包含在此根组件内。

共享模块随着应用程序的发展，我们将看到需要一个可以表示常用服务的共享模块。因此，共享模块对于应用程序的多个区域/功能非常有用。如果任何组件可以在多个功能中重复使用，我们可以在共享模块内声明它。服务和管道是共享模块最常见的用途。共享模块并不总是遵循我们讨论过的“部分”理念。相反，它们可用于共享公共部分以填充功能模块“部分”。

核心模块我们可以使用核心模块将配置层与应用程序的其余部分分开。为此，我们可以在 CoreModule 中声明所有功能和共享模块，然后将 CoreModule 提供给 AppModule。对于可能在所有功能模块中使用的任何内容，我们都可以在 CoreModule 中声明它。因此，核心模块可以被视为将添加到应用程序中的所有内容的父功能模块。

在我们的应用中设置模块结构

让我们尝试通过实际应用来演示这一点。我们将设置我们的应用程序，以便我们可以使用 Angular 模块结构，这应该会让事情变得清晰。首先，我们将使用以下命令生成核心模块、核心组件，然后生成共享模块：ng generate module core ng generate component core

如果我们先设置模块，则会创建一个包含核心模块的文件夹。然后，当生成组件时，它将被放置在同一个文件夹中，并由我们的 CLI 在模块中声明。

ng g module shared 我们暂时不打算对 SharedModule 进行任何操作，但我们会生成它以供将来使用。

接下来，我们必须将 CoreModule 告知我们的 AppModule。因此，我们将在 AppModule 中导入 CoreModule，然后将其添加到“imports”数组中。AppModule 应如下所示：

      import {BrowserModule} from '@angular/platform-browser';
import {CoreModule} from './core/core.module';
import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    CoreModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}
    

现在我们打开 app.component.html 并将内容替换为 my-app-core。此外，“my-app-core”是我们核心组件的选择器。因此，本质上，我们只是要求我们的 AppComponent 为 CoreComponent 提供服务。如果我们运行 ng serve 并点击 localhost:4200，我们将在控制台中看到一个错误，提示 my-app-core 不是已知元素，页面上不会显示任何内容。这意味着我们的应用程序不知道任何具有选择器“my-app-core”的组件。让我们分析一下为什么会这样。我们在 CoreModule 中声明了 CoreComponent，但我们没有将其暴露给我们的应用程序。为此，我们需要将 CoreComponent 添加到 CoreModule 内的“exports”数组中。因此，我们的 CoreModule 应该如下所示：

      import {NgModule} from '@angular/core';
import {CoreComponent} from './core.component';
import {CommonModule} from '@angular/common';

@NgModule({
  imports: [CommonModule],
  declarations: [CoreComponent],
  exports: [CoreComponent]
})
export class CoreModule {}
    

现在，当我们再次运行 ng serve 并在浏览器中验证时，我们会看到“我的核心组件正在运行！”，它代表我们的 CoreComponent 的内容/模板。

结论

因此，我们看到了 Angular 模块的用途，它允许我们将应用程序的整体功能分组为逻辑部分。模块还可用于启用提前编译和延迟加载。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

在 Angular 模块中声明组件

杭州电子商务研究院

5年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

//app.module.ts import {NgModule} from '@angular/core'; import {BrowserModule} from '@angular/platform-browser'; import {AppComponent} from './app.component'; @NgModule({ declarations: [AppComponent], imports: [BrowserModule], providers: [], bootstrap: [AppComponent] }) export class AppModule {}

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; @NgModule({ declarations: [AppComponent, MyCustomComponent, MyCustomDirective, MyCustomPipe], imports: [BrowserModule], providers: [MyUserService, MyOtherService], bootstrap: [AppComponent] }) export class AppModule { }

import {BrowserModule} from '@angular/platform-browser'; import {CoreModule} from './core/core.module'; import {NgModule} from '@angular/core'; import {AppComponent} from './app.component'; @NgModule({ declarations: [AppComponent], imports: [ BrowserModule, CoreModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule {}

import {NgModule} from '@angular/core'; import {CoreComponent} from './core.component'; import {CommonModule} from '@angular/common'; @NgModule({ imports: [CommonModule], declarations: [CoreComponent], exports: [CoreComponent] }) export class CoreModule {}