Angular 7 组件

17 Mar 2025 | 阅读 2 分钟

组件是 Angular 的关键特性。 整个应用程序都是通过使用不同的组件构建的。

Angular 的核心思想是构建组件。 它们将您的复杂应用程序变成可重用的部分,您可以非常容易地重用它们。

如何创建一个新组件?

打开 WebStorm >> 转到您的项目源文件夹 >> 展开 app 目录并创建一个名为“server”的新目录。

现在,在 server 目录中创建组件。 右键单击 server 目录并创建一个名为“server.component.ts”的新文件。 这是新创建的组件。

组件用于在 Angular 中构建网页,但它们需要模块才能将它们捆绑在一起。 现在,您必须在模块中注册我们的新组件。

使用 CLI 创建组件

语法

让我们看看如何使用命令行创建一个新组件。

打开命令提示符,如果 ng serve 命令在浏览器上运行,请停止它。

输入 ng generate component server2 以创建一个名为 server2 的新组件。

您也可以使用快捷方式 ng g c server2 来执行相同的任务。

Angular 7 Components
Angular 7 Components

在上图中,您可以看到创建了一个名为“server2”的新组件。 它包含与您创建第一个应用程序时看到的相同的其他组件。

在这里,server2.component.spec.ts 组件用于测试目的。 您可以通过右键单击它来删除它。

Angular 7 Components
Angular 7 Components