Angular 学习之路 06 – 组件

本章我们将介绍 Angular 组件。前面我们说过,组件是 Angular 的核心,其它的一切都是围绕组件设计的:服务为组件提供业务逻辑、模块对组件进行打包。我们还是以前面创建的 demo 项目为例。demo 项目的代码可以在这里找到。

什么是 Angular 组件?

组件是 Angular 项目的核心,包含数据以及定义界面如何显示、有何行为的界面逻辑。组件会关联一个模板 HTML 作为显示用的视图。

Angular 组件是普通的 JavaScript 类,使用@Component修饰符修饰。@Component修饰符给出组件的视图、元数据等信息。组件负责给视图提供数据。Angular 通过数据绑定将组件类的数据与 HTML 视图关联起来。这是由特殊的 Angular 模板语法实现的。组件类也可以知道视图发生变化,从而对视图的变化做出响应。

一个 Angular 应用由许多组件构成。每一个组件都是界面的一个部分。这些组件在一起构成完整的界面。

Angular 组件由三个主要部分组成:

  • 视图模板 template
  • 组件类 class
  • 元数据 metadata

下面我们再拿出来AppComponent来详细介绍下组件的组成:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'demo';
}

组件的组成

视图模板

模板定义了视图的布局以及如何在页面进行渲染。没有视图,Angular 就不会在 DOM 中插入节点。模板使用 HTML 创建,HTML 中可以有 Angular 指令以及数据绑定。设置组件的模板有两种方法:

  1. 外部 HTML 文件
  2. 内联 HTML 字符串代码

组件类

组件类是关联到模板的代码。组件类通常由 TypeScript 编写,但也可以使用普通 JavaScript。组件类可以包含属性和方法。组件类的属性可以通过数据绑定在视图中使用。

一个典型的 Angular 组件类如下:

export class AppComponent {
  title = 'demo';
}

Angular 推荐组件类的类名使用Component作为后缀,文件名以 .component.ts 作为后缀。

元数据

元数据在@Component修饰符中定义,为组件提供额外信息。Angular 使用这些信息处理组件类。

修饰器是一种可以给类、函数或者属性添加额外数据的函数。Angular 组件使用@Component修饰符。当一个类使用@Component修饰符修饰时,Angular 就会把这个类当做组件。@Component修饰符必须在组件类定义的前面,也就是说,类定义需要紧跟@Component修饰符。

@Component修饰符有下面几个重要的属性:

  • selector - 一个简单的 CSS 选择器,当发现页面有相应选择器时,Angular 会把选择器所在位置替换为组件的模板
  • providers - 声明组件的服务。通常服务是全局单例的,但组件也可以声明自己的服务。在providers中声明的服务只能在组件内部以及组件的子组件中使用
  • styles/styleUrls - 组件所需的 CSS 代码或 CSS 文件,其中,内联的 CSS 代码放在styles中,CSS 文件在styleUrls中;这里的 CSS 仅适用于组件自己,不会影响到外部节点
  • template/templateUrl - HTML 模板定义了组件的视图,告诉 Angular 如何渲染组件;与styles/styleUrls类似,内联的 HTML 代码在tempalte中,外部的 HTML 文件在templateUrl。一个组件只能使用一个模板,templatetemplateUrl不能同时使用。

使用 Angular CLI 可以帮我们创建 Angular 组件,具体命令是:

ng generate component todo

简写模式是:

ng g c todo

其中,todo 是我们要生成的组件名字。命令执行后,Angular CLI 会生成一个 todo 文件夹,下面有四个文件:

  • todo.component.ts
  • todo.component.spec.ts
  • todo.component.css
  • todo.component.html

Angular CLI 会自动帮我们把新生成的组件注册到最近的一个模块(记得每个 Angular 组件都必须隶属于唯一一个模块)。

Angular CLI 命令有很多参数,可以帮我们生成需要的组件代码。我们可以在这里找到所有参数。

例如,如果我们想要生成内联 HTML 和 CSS 的组件,那么可以使用:

ng g c todo --inlineStyle=true --inlineTemplate=true

这样生成的文件只有两个:todo.component.ts 和 todo.component.spec.ts。其中,todo.component.ts 内容如下:

@Component({
  selector: 'app-todo',
  template: `
    <p>
      todo works!
    </p>
  `,
  styles: [
  ]
})
export class TodoComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

注意这里生成的 HTML 代码出现在template字段。

组件选择器

Angular 按照组件定义的 CSS 选择器渲染组件。前面我们看到,选择器是在@Component修饰器的selector属性定义的:

@Component({
  selector: 'app-root',
  ...
})

app-root意味着选择器是元素标签名:<app-root></app-root>,在 index.html 中可以看到:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Demo</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>

当我们创建一个 Angular 组件时,可以认为我们创建了一个新的 HTML 元素。这个新的 HTML 元素名就是使用selector定义,然后在 HTML 中使用。Angular 会在 HTML 中查找这样的选择器,如果找到匹配的组件,就将组件渲染在对应的位置。

既然是 CSS 选择器,那么就可以有很多额外的选择:

使用 CSS 类名

@Component({ selector: '.app-root' })

使用 CSS 类名渲染组件:

<div class="app-root"></div>

使用属性名

@Component({ selector: '[app-root]' })

使用元素属性渲染组件:

<div app-root></div>

使用属性名和值

@Component({ selector: 'div[app=components]' })

使用元素属性名以及指定的值渲染组件:

<div app="components"></div>

Leave a Reply