Angular学习笔记(2) 组件

这一部分来介绍一下，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: '