在 Angular 中创建自定义模块

今天我们将学习如何创建自己的 Angular 模块。如果你还不了解 Angular 模块，我建议你先阅读这篇文章。

为了创建模块，我们将使用下面的 CLI 命令
ng generate module <module_name>
或简写
ng g m <module_name>

让我们从项目根目录打开命令提示符并输入以下代码 -
ng g m payroll

在命令提示符中，您将看到如下所示的内容 - 让我们看看项目是什么样子的 - 所以在这里我们可以看到已经创建了一个带有模块名称的文件夹，并且创建了一个名为 file 的文件。



payroll.module.ts

让我们打开文件看看 -

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

@NgModule({
  declarations: [],
  imports: [
    CommonModule
  ]
})
export class PayrollModule { }

在上面的代码中，我们可以看到与 Angular 提供的模块类似的结构app.module.ts。
另外，您注意到声明数组为空，因为我们还没有与此模块关联的任何 component/pipe/ 指令。如果我们想将任何 component/pipe/ 指令放入此指令中，则需要添加到此列表中。

让我们看看怎么做。为此，让我们再次打开提示符（从项目根文件夹），并输入 CLI 命令来创建组件。

让我们运行以下命令：ng g c PayrollDashboard

但是等等✋🏻，你可能会问，如果我运行上面的命令，我的组件会被添加到哪个模块中？
在上述情况下，新组件仍然会被添加到app.module。
为了指定模块，我们还需要在上面👆🏻 CLI 命令中添加一些额外的标志。

ng g component PayrollDashboard
--module=payroll/payroll.module.ts

在这里您可以看到我们之前在创建自定义组件 时看到的非常相似的输出，但有一个细微的区别是最后一行您可以看到更新发生在
payroll.module.ts文件上而不是app.module.ts 上

现在，如果您打开 payroll.module.ts 文件，您将看到声明数组已添加到新创建的组件中。
但您可能仍然不太高兴，因为该组件是在 payroll 文件夹之外创建的（用黄色箭头标记）—— 如果您仔细观察，会发现 payroll-dashboard 是在 payroll 文件夹之外创建的。但我需要 payroll 文件夹下的所有工资单功能，对吗？ 为此，我们需要对之前用于创建组件的 CLI 命令进行一些细微的调整——



ng g component payroll/PayrollDashboard --module=payroll/payroll.module.ts

如果您看到，我们在创建组件时在组件名称前添加了文件夹名称。很酷吧！

这样我们就添加了组件。
但是如何使用呢？
它和之前一样吗？像下面这样

使用组件选择器并添加到app.component.html文件中？ 答案是不行！ 还差两步（我说的是非常重要的步骤，你必须注意）。

1️⃣ 由于 payroll.component 是独立模块（payroll module）的一部分，因此您需要在即将使用的模块（app.module）中导入
payroll module。 在本例中，我们将使用 payroll.component（位于 payroll module 中）文件app.component.html，该文件位于…… 看看我们是如何添加新创建的模块的？ 在 imports 数组中，我们添加了 payroll.module 的名称。我们之前讨论过，对吧？app.module.ts

2️⃣ 仅仅添加模块是不够的。我们需要将组件（我们在外部使用的）添加到声明该组件的模块的 exports 数组中。因此
，在我们的例子中，我们需要将组件的名称添加到exportspayroll.module

就是这样...
如果你打开浏览器，你一定会看到下面的输出 -

希望你喜欢这篇文章。
接下来我们将介绍 Angular 中不同类型的模块。敬请期待！
如果你喜欢这篇文章，请点赞、分享和评论。

我会在推特上发布更多内容Angular JavaScript TypeScript CSS
，希望在那里也能见到你😃

干杯！祝你
编程愉快！