这一部分来介绍一下，Angular 中的组件的概念。组件，翻译就是 Component

1. 组件的基本概念

组件，在 Angular 中被定义为一种教浏览器识别html新标签的一种方式。
首先，我们来识别一下 Angular 中的一个组件的基本的概念，如下图所示，是我们在第一部分创建的一个工程的结构：

如上图所示，在 app 目录下，包含了多个文件，其中，app.module.ts，我们会在介绍模块时进行介绍，现在不进行介绍；app.component.spec.ts 是用来辅助进行测试用的，这个文件，短时间也用不上；另外还有三个文件，我们可以看到，app.component.css和app.component.html两个文件，会配置在 app.component.ts 中，所以，我们当前只关注 app.component.ts 的内容，随后会通过这个文件的结构配置的介绍，介绍另外两个文件的作用。
下面，介绍上面的ts文件（标准的TypeScript文件，之前有介绍过，学习Angular需要有 html、css和TypeScript的基础，如果不熟悉，可以先学习一下）中的信息：

• import，类似于Java中的import关键字，导入需要用到的，定义在其他的ts文件中的类，或者变量；
• @Component，类似于Java中的注解，实际上，很多的教程里面，也将其称为注解，但是在TypeScript中，这类语法被称为装饰器，我觉得咋叫都行，知道是做什么的就够了；
• templateUrl，模板名称，扩展名是 .html 就可以看出来这个参数是做什么用的，就是用来设置当前组件对应的html代码片段的样子（当然，也有个参数叫 template，这个参数用来将 html 模板配置在 ts 文件中，但是我个人非常不喜欢这样的写法，所以就不介绍了，谁关心就自己看）；
• styleUrls，很明显，设置当前组件的模板的渲染方式，从格式上看，这是个数组，就是说，可以配置多个css样式；
• selector，这个参数就很有意思了，上面，我们介绍了当前组件、组件的模板（html片段）、模板的样式，这个参数，就是用来定义，这个组件的模板搁在页面的哪里的。
  
  Angular 项目在部署时，基础就是src目录下面的index.html，其他组件都是直接或间接的定义在这个页面里面。
  比如，在 index.html中，定义了app-root标签，而上面的元素 selector 的值设置的就是 app-root，那么，在生成页面的时候，上面的app component的模板就搁在index.html中app-root标签的地方。
  上面介绍了一些基本的概念，下面介绍一些不错的用法，来激发一下使用Angular的热情，不然就很没意思了。

2. 模板绑定

模板绑定，语法结构是 {{ … }}，大家可以参考下 Spring 中的 EL 表达式，用法真真的一样，主要的一些用法，用代码展示：
app.component.ts代码如下：

import { Component } from '@angular/core';class Person {constructor(public id: number,public name: string,public age: number) {}getMessage(): string {return 'name is: ' + this.name + ', and age is: ' + this.age;}
}@Component({selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css']
})
export class AppComponent {title = 'angular-frontend';person: Person;constructor() {this.person = new Person(1, 'zhang san', 25);}
}

app.component.html模板代码如下：

<p>hello world</p>
<!-- 数据绑定 -->
<p>{{title}}</p>
<!-- 表达式，运算 -->
<p>1 + 2 = {{1 + 2}}</p>
<!-- 表达式，获取对象属性 -->
<p>{{person.age}}</p>
<!-- 表达式，函数调用 -->
<p>{{person.getMessage()}}</p>

最后的运算结构如下：

3. Input和Output

3.1 模块创建方法

这里，我们创建一个子组件（前面有介绍到，一个模块中，组件是树状组织起来的）上面的 app组件，我们定义了一个 person 变量，那么，如果我们希望在一个子组件中显示该 person 的信息，该怎么做呢？
首先，定义一个组件 person-message，定义组件的命令为：

ng generate component [component-name]

执行上面的命令，就会在执行命令的文件夹下面创建一个Component，名字是上面设置的内容（当然，有些地方还会教各种缩写，我自己脑容量有限，就不记缩写了，有兴趣可以自己查查），我们在 src/app下面，执行下面的命令：

ng generate component person-message

就创建好了一个子模块 person-message。

3.2 值传递到子模块

这里，我们介绍一下，如何将在 AppComponent 中，定义的变量的值，传递到 子模块 PersonMessageComponent 中（这里，我们将 person 的 getMessage() 方法的返回值传递下去）。
首先，我们需要在 PersonMessageComponent 中，定义一个变量，用来接收数据：

import {Component, Input, OnInit} from '@angular/core';@Component({selector: 'app-person-message',templateUrl: './person-message.component.html',styleUrls: ['./person-message.component.css']
})
export class PersonMessageComponent implements OnInit {@Input()msg: string;constructor() { }ngOnInit(): void {}
}

这里，可以看出，在 PersonMessageComponent 中，定义了一个成员变量 msg，使用一个 @Input() 注解来修饰，@Input() 注解，就说明数据需要从外面传递进来（其实，针对这个注解，还有各种各样的其他用法，比如传递的名字和实际这里定义的名字不一样的时候咋办，跟 Spring Web 框架接收值类似，但是我觉得完全没必要纠结，我们自己定义，为什么要定义成不一样的呢？所以那些方法没必要记住）。
然后，咱们在html的 selector 的标签的地方，应该如何将值传递进来呢？
如 app.component.html所示：

<p>hello world</p>
<app-person-message[msg]="person.getMessage()">
</app-person-message>

咱们在定义 app-person-message 的时候，传递一个 msg 进去，使用 [] 括起来，就表示是传入数据，等于号后面的双引号中，实际上，就是一个表达式。
我们在person-message模块的模板中，如下定义：

<p>person-message module</p>
<p>{{msg}}</p>

最后，展示出来的页面如下：

3.3 Output输出

在上面一节，介绍输入使用 []，这里，输出使用的是 ()，我们在 person-message 中定义一个按钮，用来做输出示例：
person-message.component.html内容如下：

<p>person-message module</p>
<p>{{msg}}</p>
<button (click)="onClick(msg)">显示MSG</button>

在 person-message.component.ts 中，增加成员函数 onClick：

  onClick(msg): void {console.log(msg);}

如上，我们定义了一个 click 事件的输出，内容是执行后面双引号中的表达式，也就是执行这个函数，函数内容是在console中记录信息，我们打开调试框：

事实上，我觉得正常的事件都足够了，我也不喜欢自己去定义事件，但是如果确实觉得需要自己去定义事件，可以自己创建 EventEmitter 事件，一般 output 都是 EventEmitter 事件，这方面的内容，我就不介绍了。

4. 数据绑定

Angular 的数据绑定还是很丰富，单向数据绑定，双向数据绑定，都有，我自己不喜欢双向数据绑定，一方面水平有限，觉得这玩意儿太复杂，另一方面，也确实觉得单向数据绑定足够了。
单向数据绑定，就是数据都是从上一层组件流入下一层组件，如果需要改变数据，就需要从顶层重新触发数据，再向下传递。
数据绑定，从用途来看，只要涉及到值，都可以算是传递，比如参数绑定、事件绑定等，都可以算是数据绑定的类型。
这篇文章介绍了组件的基本概念，组件的树状的组织方式，组件的数据的渲染，组件之间的数据的传入和传出以及数据绑定。