创建一个 Angular 组件

2024-04-09 19:10:19 阅读数 1226

组件（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: 组件样式文件的路径, 同样是相对于组件类所在的文件路径。该属性的数据类型是一个数组，因此，可以包含多个组件样式文件。

阿狗工具

创建组件

配置组件类

参考资料