Angular 组件概述

组件是 Angular 应用的主要构造块。每个组件包括如下部分：

• 一个 HTML 模板，用于声明页面要渲染的内容

• 一个用于定义行为的 TypeScript 类

• 一个 CSS 选择器，用于定义组件在模板中的使用方式

• （可选）要应用在模板上的 CSS 样式

本主题描述如何创建和配置 Angular 组件。

要查看或下载本主题中使用的范例代码，参阅 现场演练 / 下载范例 。

前提条件

要创建一个组件，请先验证你是否满足以下前提条件：

• 安装 Angular CLI 。

• 创建一个带有初始项目的 Angular 工作区 。如果还没有项目，你可以用 ng new <project-name&gt;创建一个，其中 <project-name>是你的 Angular 应用的名字。

创建一个组件

Angular CLI 是用来创建组件的最简途径。你也可以手动创建一个组件。

使用 Angular CLI 创建组件

使用 Angular CLI 创建一个组件：

• 在终端窗口中，导航到要放置你应用的目录。

• 运行 ng generate component <component-name&gt;命令，其中 <component-name>是新组件的名字。

Run the ng generate component <component-name&gt;command, where <component-name>is the name of your new component.

默认情况下，该命令会创建以下内容：

• 一个以该组件命名的文件夹

• 一个组件文件 <component-name>.component.ts

• 一个模板文件 <component-name>.component.html

• 一个 CSS 文件，<component-name>.component.css

• 测试文件 <component-name>.component.spec.ts

其中 <component-name>是组件的名称。

你可以更改 ng generate component创建新组件的方式。欲知详情，参阅 Angular CLI 文档中的 ng generate component 。

手动创建组件

虽然 Angular CLI 是创建 Angular 组件的最佳途径，但你也可以手动创建一个组件。本节将介绍如何在现有的 Angular 项目中创建核心组件文件。

要手动创建一个新组件：

• 导航到你的 Angular 项目目录。

• 创建一个新文件 <component-name>.component.ts。

• 在文件的顶部，添加下面的 import 语句。

import { Component } from '@angular/core';

• 在 import语句之后，添加一个 @Component装饰器。

@Component({
})

• 为组件选择一个 CSS 选择器。

@Component({
  selector: 'app-component-overview',
})

关于选择选择器的更多信息，参阅指定组件的选择器。

• 定义组件用以显示信息的 HTML 模板。在大多数情况下，这个模板是一个单独的 HTML 文件。

@Component({
  selector: 'app-component-overview',
  templateUrl: './component-overview.component.html',
})

关于定义组件模板的更多信息，参阅定义组件的模板。

• 为组件的模板选择样式。在大多数情况下，你可以在单独的文件中定义组件模板的样式。

@Component({
  selector: 'app-component-overview',
  templateUrl: './component-overview.component.html',
  styleUrls: ['./component-overview.component.css']
})

• 添加一个包含该组件代码 class语句。

export class ComponentOverviewComponent {

}

指定组件的 CSS 选择器

每个组件都需要一个 CSS 选择器。选择器会告诉 Angular：当在模板 HTML 中找到相应的标签时，就把该组件实例化在那里。比如，考虑一个组件 hello-world.component.ts，它的选择器定义为 app-hello-world。当 <app-hello-world>出现在模板中时，这个选择器就会让 Angular 实例化该组件。

在 @Component装饰器中添加一个 selector语句来指定组件的选择器。

@Component({
  selector: 'app-component-overview',
})

定义一个组件的模板

模板是一段 HTML，它告诉 Angular 如何在应用中渲染组件。可以通过以下两种方式之一为组件定义模板：引用外部文件，或直接写在组件内部。

要把模板定义为外部文件，就要把 templateUrl添加到 @Component装饰器中。

@Component({
  selector: 'app-component-overview',
  templateUrl: './component-overview.component.html',
})

要在组件中定义模板，就要把一个 template属性添加到 @Component中，该属性的内容是要使用的 HTML。

@Component({
  selector: 'app-component-overview',
  template: '<h1>Hello World!</h1>',
})

如果你想让模板跨越多行，可以使用反引号（```）。比如：

@Component({
  selector: 'app-component-overview',
  template: `
    <h1>Hello World!</h1>
    <p>This template definition spans multiple lines.</p>
  `
})

Angular 组件需要一个用 template或 templateUrl定义的模板。但你不能在组件中同时拥有这两个语句。

声明组件的样式

有两种方式可以为组件的模板声明样式：引用一个外部文件，或直接写在组件内部。

要在单独的文件中声明组件的样式，就要把 styleUrls属性添加到 @Component装饰器中。

@Component({
  selector: 'app-component-overview',
  templateUrl: './component-overview.component.html',
  styleUrls: ['./component-overview.component.css']
})

要想在组件内部声明样式，就要把 styles属性添加到 @Component，该属性的内容是你要用的样式。

@Component({
  selector: 'app-component-overview',
  template: '<h1>Hello World!</h1>',
  styles: ['h1 { font-weight: normal; }']
})

styles属性接受一个包含 CSS 规则的字符串数组。

下一步

• 关于组件的体系结构概述，参阅组件和模板简介

• 关于创建组件时可以使用的其他选项，参阅“API 参考手册”中的“组件”

• 要了解关于为组件指定样式的更多信息，参阅组件样式

• 关于模板的详细信息，参阅模板语法