Angular7入门辅助教程（二）——组件和模板

如果有任何的非技术障碍，比如如何新建Angular项目，请先到我的"Angular7入门辅助教程"专栏参考这篇博客：Angular7入门辅助教程——前篇

Component

Angular中的组件是非常重要的知识点，因为它构成了Angular应用，所以这篇博客来介绍一下Angular中与组件和模板有关的知识点！例如视图、数据绑定、数据显示、组件类与模板的交互等等

心法篇

• 组件和模板共同构成视图
• 模板类似于HTML代码段，但是两者是不同的东西，区别之一就是模板可以使用Angular的数据绑定
• Angular应用由大大小小的组件构成，这些组件要么构成一颗单根组件树（NgModule元数据对象的bootstrap数组只有一个组件）或者森林（NgModule元数据对象的bootstrap数组包含多个组件），不同的组件可以来自同一个NgModule，也可以来自不同的NgModule，这些组件要么通过声明的方式使用（也就是别的组件模板中包含该组件），要么通过路由
• 我们并不需要显式的创建组件实例，Angular会帮我们做（这一点不懂没关系，到依赖注入之服务、服务提供商、单例服务这三章或许更好懂些）

详细教程篇

1、组件的元数据

和NgModule类似，组件也需要标识，这个标识就是@Component()装饰器，它接受一个对象作为参数，这个参数就是组件的元数据

@Component({
  selector:    'app-hero-list',
  templateUrl: './hero-list.component.html',
  providers:  [ HeroService ]
})
export class HeroListComponent implements OnInit {
/* . . . */
}

@Component()装饰器接收一个对象作为参数，这个对象就是组件的元数据，而紧跟在@Component()装饰器后的那个类就是组件类，接下来。我们聚焦于这个元数据对象

• selector（css选择器）——它告诉Angular应该在什么地方插入该组件的实例，例如上面这个组件的css选择器叫app-hero-list，则如果其他的模板中出现了<app-hero-list></app-hero-list>标签，这Angular就会在此插入该组件的一个实例
• templateUrl（组件模板的url）——说白了，就是模板文件路径，当然，你也可以使用组件元数据对象的template属性来为组件指定一个内嵌的模板
• providers（服务提供商列表）——这里列出来组件级别的服务提供商，也就是该服务提供商提供的服务实例只能在该组件以及该组件的子组件中使用

2、组件的创建

我们可以使用Angular CLI 使用如下命令快速组件

ng generate component 组件名

例如，我要创建一个名叫hero的组件

ng generate component hero

 这是，Angular CLI会在src/app目录下面生成一个名叫hero的目录，里面有4个文件：hero.component.css（该组件的私有样式文件），hero.component.html（该组件的外联模板文件，通过组件元数据对象的templateUrl属性来引用），hero.component.spec.ts（该组件的测试文件）,hero.component.ts，并将该组件的组件类添加到AppModule的declarations数组中

hero.component.ts的内容如下

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

@Component({
  selector: 'app-hero',
  templateUrl: './hero.component.html',
  styleUrls: ['./hero.component.css']
})
export class HeroComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

如果你想在某文件下新建组件，这可以使用下面的命令

ng generate component 文件目录/组件名

3、数据显示

在这里讲解几种在组件模板中显示数据的方式

• 模板表达式

模板表达式这应该是一种最基础的显示数据的方式了吧！ 基本语法是：{ {表达式}},双花括号中的表达式可以是数值计算，比如1+1,，也可以是该组件对应的组件类中的属性，例如利用Angular CLI创建新项目时，appComponent的模板文件就绑定了组件类中的title属性，就像下面这样

app.component.html