在 Angular 中，模块是组织和分离应用程序功能的基本构建块之一。每个模块都可以包含许多组件，这些组件可以视为该模块的一部分并且共享相同的上下文。在本文中，我们将介绍如何使用 Angular-CLI 创建一个特定模块的组件。
步骤
以下是创建特定模块组件的步骤：
打开终端并进入你的 Angular 项目目录。
运行以下命令以生成新的组件并指定其所属的模块：
ng generate component <component-name> --module=<module-name>
其中
<component-name>是你要创建的组件名称，<module-name>是该组件所属的模块名称。Angular-CLI 将自动生成一个新的组件文件夹，并将其添加到指定的模块中。例如：
create src/app/my-module/my-component/my-component.component.css (0 bytes) create src/app/my-module/my-component/my-component.component.html (23 bytes) create src/app/my-module/my-component/my-component.component.spec.ts (614 bytes) create src/app/my-module/my-component/my-component.component.ts (267 bytes) update src/app/my-module/my-module.module.ts (385 bytes)
在生成的组件文件夹中，你会看到四个文件：CSS、HTML、规范测试、和 TypeScript 文件。这些文件中的 TypeScript 文件是你要编辑组件逻辑的地方。根据需要对 CSS 和 HTML 文件进行更改。
最后，通过在模板中添加新组件的选择符来使用该组件。例如：
<app-my-component></app-my-component>
示例
假设我们有一个名为 DashboardModule 的模块，并且我们想要创建一个名为 SalesWidgetComponent 的组件并将其添加到该模块中。
我们可以遵循以下步骤：
打开终端并进入项目目录。
运行以下命令以生成新的组件并指定其所属的模块：
ng generate component sales-widget --module=dashboard
在生成的组件文件夹中，打开
sales-widget.component.ts文件并添加组件逻辑。例如：-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------------ --------- ------------------- ------------ -------------------------------- ---------- -------------------------------- -- ------ ----- -------------------- - -- ---- -
在
dashboard.module.ts文件中添加导入和声明：-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------ - ---- ------------------ ------ - -------------------- - ---- ---------------------------------------- -- ---- ----------- ------------- - -------------------- -- ---- -- -------- - ------------ - -- ------ ----- --------------- - -在
dashboard.component.html模板中使用组件：<app-sales-widget></app-sales-widget>
现在你已经成功地创建了一个特定模块的组件，并将其添加到该模块中。祝贺你！
结论
通过使用 Angular-CLI 工具，我们可以轻松地创建特定模块的组件。此方法使我们能够更好地组织和管理应用程序代码，并促进模块化开发。希望这篇文章对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/26427