组件（Component）是 Angular 应用的基本组成单元。Angular 应用的组件可以控制页面上不同区块的渲染和行为，这些区块被称为视图。
页面的构成
一个 Angular 应用的组件，是按照树形结构进行组织的，组件之间可以进行通信和交互。也可以说，Angular 应用的架构就是其所包含的组件的架构。
组件架构
创建组件
我们可以使用 Angular CLI 的 generate 命令创建一个组件。创建组件的命令格式为：
ng generate component <name>
或者
ng g component <name>
现在，我们就动手创建一个组件。打开命令行工具，导航到我们在前文中创建的 my-app 项目的根文件夹，输入下面的命令，回车执行。
ng generate component book
命令执行成功后，其输出结果如下所示：
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 模块中。
import { BrowserModule } from '@angular/platform-browser’;
import { NgModule } from '@angular/core’;
import { AppComponent } from './app.component’;
import { BookComponent } from './book/book.component’;
@NgModule({
declarations: [
AppComponent,
BookComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
组件在模块中的注册过程分为两步：
- 在模块文件中，导入要注册的组件。
import { BookComponent } from './book/book.component’;
- 在模块的
@NgModule注解的declarations属性中，添加组件名称。
…
@NgModule({
declarations: [
AppComponent,
BookComponent
],
…
})
export class AppModule { }
配置组件类
组件类是一个典型的 TypeScript 类，再加上 @Component 注解。根据 Angular 的约定，类名通常以 Component 结尾（文件名也有类似约定）。例如，我们的 book 组件，组件类的类名为 BookComponent，代码如下所示：
import { Component, OnInit } from '@angular/core’;
@Component({
selector: 'app-book’,
templateUrl: './book.component.html’,
styleUrls: ['./book.component.css’]
})
export class BookComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
我们重点介绍一下 @Component 注解的三个属性：
-
selector: 选择器用于匹配 HTML 标签元素， 绘制 HTML 模板。在选择器的名称中，app是默认的前缀，但是，可以在创建 Angular 应用时，通过--prefix选项自定义前缀名称。 -
templateUrl: 组件模板文件的路径, 这是一个相对路径，基于组件类所在的文件路径。 -
styleUrls: 组件样式文件的路径, 同样是相对于组件类所在的文件路径。该属性的数据类型是一个数组，因此，可以包含多个组件样式文件。
