模块 - 什么是Angular模块?

优质
小牛编辑
143浏览
2023-12-01

另一个类比了解Angular 2模块的是类。 在类中,我们可以定义公共或私有方法。 公共方法是我们代码的其他部分可以用来与之交互的API,而私有方法是隐藏的实现细节。 以相同的方式,模块可以导出或隐藏组件,指令,管道和服务。 导出的元素可被其他模块使用,而未导出(隐藏)的元素只是在模块本身内部使用,并且不能被我们的应用程序的其他模块直接访问。

模块的基本使用 为了能够定义模块,我们必须使用装饰器 。

在上面的例子中,我们已经将类AppModule转换为Angular 2模块,只需使用NgModule装饰器。 NgModule装饰器至少需要三个属性:importdeclarationsbootstrap

属性需要一个模块数组。 这里是我们定义我们的拼图的部分(我们的应用程序)。 declarations属性需要一个作为模块的一部分的组件,指令和管道的数组。bootstrap属性是我们定义模块的根组件的地方。 即使这个属性也是一个数组,99%的情况我们只定义一个组件。

以下是由一个组件组成的基本模块的样子:

app/app.module.ts

文件app.component.ts只是一个“hello world”组件,没有什么有趣的。另一方面,app.module.ts文件遵循我们之前定义模块的结构,但在这种情况下,我们定义了我们将要使用的模块和组件。

我们注意到的第一件事是,我们的模块是将BrowserModule导入为显式依赖项。 BrowserModule是一个内置的模块,用于导出基本指令,管道和服务。与以前版本的Angular 2不同,我们必须显式导入这些依赖关系,以便能够在模板中使用类似*ngFor*ngIf的指令。

假定我们模块的根(唯一)组件是,我们必须在bootstrap数组中列出它。因为在declarations属性中,我们应该定义组成应用程序的所有组件或管道,我们必须再次定义AppComponent

在继续之前,有一个重要的澄清要做。有两种类型的模块,根模块和功能模块。

以同样的方式,在一个模块中,我们有一个根组件和许多可能的次级组件,在应用程序中,我们只有一个根模块和零个或许多功能模块。 为了能够引导我们的应用程序,Angular需要知道哪个是根模块。 识别根模块的简单方法是查看其NgModule装饰器的imports属性。 如果模块正在导入BrowserModule,那么它是一个根模块,如果相反是导入,那么它是一个功能模块。

按照惯例,根模块应始终命名为AppModule

引导应用程序

为了引导我们基于模块的应用程序,我们需要通知Angular哪一个是我们的根模块在浏览器中执行编译。这种在浏览器中的编译也称为“Just in Time”(JIT)编译。

main.ts

在下一节中,我们将了解如何创建具有多个组件,服务和管道的模块。