创建一个 Angular 组件

组件（Component）是 Angular 应用的基本组成单元。Angular 应用的组件可以控制页面上不同区块的渲染和行为，这些区块被称为视图。

一个 Angular 应用的组件，是按照树形结构进行组织的，组件之间可以进行通信和交互。也可以说，Angular 应用的架构就是其所包含的组件的架构。

创建组件

我们可以使用 Angular CLI 的 generate 命令创建一个组件。创建组件的命令格式为：

或者

现在，我们就动手创建一个组件。打开命令行工具，导航到我们在前文中创建的 my-app 项目的根文件夹，输入下面的命令，回车执行。

命令执行成功后，其输出结果如下所示：

CREATE src/app/book/book.component.css (0 bytes)CREATE src/app/book/book.component.html (19 bytes)CREATE src/app/book/book.component.spec.ts (612 bytes)CREATE src/app/book/book.component.ts (267 bytes)UPDATE src/app/app.module.ts (388 bytes)

从输出的结果可以看到，Angular CLI 的 generate 命令为 book 组件创建了一个文件夹，在该文件夹下，创建了四个组件文件，分别是：

• book.component.css，组件样式文件，文件类型是在创建 Angular 应用时选定的，文件中的样式规则仅作用于该组件。
• book.component.html，HTML文件，组件模板文件，定义了组件的视图。
• book.component.spec.ts，组件单元测试文件。
• book.component.ts，组件类文件，TypeScript文件，包含了组件的数据和渲染逻辑。

同时，更新了 app.module.ts 文件，把 book 组件注册到 AppModule 模块中。

组件在模块中的注册过程分为两步：

1. 在模块文件中，导入要注册的组件。

2. 在模块的 @NgModule 注解的 declarations 属性中，添加组件名称。

配置组件类

组件类是一个典型的 TypeScript 类，再加上 @Component 注解。根据 Angular 的约定，类名通常以 Component 结尾（文件名也有类似约定）。例如，我们的 book 组件，组件类的类名为 BookComponent，代码如下所示：

我们重点介绍一下 @Component 注解的三个属性：

• selector: 选择器用于匹配 HTML 标签元素， 绘制 HTML 模板。在选择器的名称中， app 是默认的前缀，但是，可以在创建 Angular 应用时，通过 --prefix 选项自定义前缀名称。
• templateUrl: 组件模板文件的路径, 这是一个相对路径，基于组件类所在的文件路径。
• styleUrls: 组件样式文件的路径, 同样是相对于组件类所在的文件路径。该属性的数据类型是一个数组，因此，可以包含多个组件样式文件。

参考资料

• https://angular.io/cli/generate#ng-generate
• https://angular.io/guide/component-overview