Angular6学习笔记16：核心知识-组件（component）

组件

简介

组件控制屏幕上被称为视图的一小片区域。将视图等同于一个小汽车，那么组件就是组成汽车的每一个零件。在类中定义组件的应用逻辑，为视图提供支持。组件通过一些由属性和方法组成的API与视图交互。当用户在整个应用中操作的时候，Angular就会创建，更新，销毁一些组件。应用可以通过一些可以选择的生命周期钩子（比如：ngOnInit() ）来在每个特定的时机采取行动。

组件的元数据

@Component 装饰器会指出紧随其后的那个类是个组件类，并为这个类指定一些元数据。新建一个类，这只是一个普通的类，没有任何Angular特有的标记或语法，当给这个类的前面加上@Component 装饰器的时候，这个类才会变成组件。组件的元数据会告诉Angular到哪里去获取它需要的主要构造类，已创建和展示这个组件及其视图。它把一个模版（无论是直接内联（template数组）到代码中还是引用外部文件（templateUrl数组））和组件关联起来。这个组件和其模版，共同构成了一个视图。除了包含或指向模版之外，@Component的元数据还要配置要如何在HTML中医用该组件（selector数组），以及该组件需要那些服务(providers数组)等等。

模版与视图

模版就是一种HTML，这个HTML会告诉Angular怎么渲染这个组件。视图通常会分层袭进行组织，这使得可以以UI分区或者页面为单位修改，显示或隐藏。与组件直接关联的模版会定义组件的宿主视图。该组件还可以定义一个带层次结构的视图，它包含一些内嵌的视图作为其他组件的宿主。

带层次结构的视图可以包含在同一个模块（NgModule）中组件的视图中，也可以（经常）包含在其他模块中定义的组件的视图。

模版语法

模版的语法和标准的HTML很像，但是模版语法中还包含了Angular的模版语法，这些模版语法可以根据应用逻辑，应用的状态和DOM数据来修改这个HTML。模版可以使数据绑定来协调应用和DOM中的数据，使用管道在显示出来之前对这个数据进行转换，使用指令来把程序逻辑应用到要显示的内容上。

数据绑定

如果没有框架，自己就要把数据值推送到HTML的控件中，并把来自用户的相应转换成动作和对值的更新。手动写这种推拉逻辑，会非常枯燥，容易出错，难以阅读。

在Angular中，Angular支持双向数据绑定，这是一种对模版中各个部件和组件中的各个部件进行协调的机制。在模版HTML中添加绑定标记可以告诉Angular怎么连接他们。

{{value}} 差值表达式，显示value的值。数据从类文件流向模版

[property] 一般用来某个控件的数据值，绑定类文件中的某个变量。数据从类文件流向模版

(event) 一般用来调用类文件中的某个方法，在方法中传值。数据从模版流向类文件

[(ngModel)]  双向绑定，数据在模版和类文件中相互流动，数据属性值通过属性绑定从组件流到输入框。用户的修改通过事件绑定流回组件，把属性值设置为最新的值。

数据绑定在模板及其组件之间的通讯中扮演了非常重要的角色，它对于父组件和子组件之间的通讯也同样重要。

管道

Angular的管道可以使模版中声明显示值的逻辑转换。带有@Pipe装饰器的类中会定义一个转换函数，用来将输入值转换成供视图显示用的输出值。Angular 本身自带了很多管道，比如： date管道，currency 管道等，也可以自己定义一些新的管道。在模版文件中，指定值的转换方式，需要使用管道操作符（ | ）。 也可以将管道串联起来，把一个管道函数的输出送给另一个管道函数进行转换。管道还能接收一些参数，来控制它具体怎么进行转换，就像date管道中的“YY--MM” 等。

指令

Angular的模版是动态的，当Angular渲染它们的时候，会根据指令给出的指示对DOM进行转换。指令就是一个带有@Directive装饰器的类。组件从技术角度上说就是一个指令，到那时由于组件对Angular应用来说非常独特，重要，所以Angular专门定义了@Component 装饰器，它使用一些面向模版的特性扩张了@Directive装饰器，除了组件外，还有两种指令：结构型指令和属性型指令。指令的元数据把指令类和一个 selector 关联起来，selector 用来把该指令插入到 HTML 中。 在模板中，指令通常作为属性出现在元素标签上，可能仅仅作为名字出现，也可能作为赋值目标或绑定目标出现。

结构型指令

结构型指令通过添加、移除或替换 DOM 元素来修改布局。 这个范例模板使用了两个内置的结构型指令来为要渲染的视图添加程序逻辑，

在之前的hero例子中：

<li *ngFor="let hero of heroes"></li>
<app-hero-detail *ngIf="selectedHero"></app-hero-detail>

这两个就属于结构型指令，

• *ngFor 是一个迭代器，它要求 Angular 为 heroes 列表中的每个 <li> 渲染出一个 <li>。

• *ngIf 是个条件语句，只有当选中的英雄存在时，它才会包含 HeroDetail 组件。

 

属性型指令

属性型指令会修改现有元素的外观或行为。 在模板中，它们看起来就像普通的 HTML 属性一样，因此得名“属性型指令”。

在之前的hero例子中：

<input [(ngModel)]="hero.name">

ngModel 指令就是属性型指令的一个例子，它实现了双向数据绑定。 ngModel 修改现有元素（一般是 <input>）的行为：设置其显示属性值，并响应 change 事件。