Angular组件
一：组件基础
1：什么是组件？
组件（Component）是构成Angular应用的基础和核心。通俗来说，组件用来包装特定的功能，应用程序的有序运行依赖于组件之间的协调工作。以我们汽车而言：轮胎、发动机、变速箱就都是组件。细化下来就是金属零件。==我们的Angular项目就是一颗组件树！==
2：模块的概念
组件化（把我们的项目以组件的形式构建）=> 模块化。
在Node.js中，模块就是一个文件，引入一个文件是简单import、require('filePath')。在我们的前端领域衍生出很多的模块化的规范。于是我们有了很多类似于AMD,CMD,ES6等等。 从项目的组织（资源目录）而言，我们通常能见到两种：
- 按资源划分
- 按模块划分
资源逐渐按模块划分就渐渐形成了我们组件化的方式。（优点：高内聚、低耦合）
我们各个框架的模块化实现不同，所以我们出现很多的模块的工具，Grunt,Gulp,Webpack，这些工具之间的模块化又各有不同。
3：Web Component标准
W3C为了统一组件化的标准方式。通过标准化的非入侵方式封装组件，每个组件都包含自己的HTML、JS、CSS代码，并且不会对页面上其他的组件产生影响。==Angular起初以Web Component标准为蓝本进行设计的==。在Angular中引入了视图包装（ViewEncapsulation）的概念，允许通过设置ViewEncapsulation.Native选项来使用原生的 Shadow DOM。
4：组件创建
命令： ng g c xxx（组件名称）；带分组那么就是 ng g c group/xxx。
- 从@angular/core 中引入Component装饰器。
- 建立一个普通的类，并用@Component装饰它。
- 在@Component中设置selector 自定义标签和template模板
5：元数据
不仅仅是templateUrl 、selector这几种，还有很多感兴趣自己了解。
==Angular中的每一句代码都是可复用的!==
二：组件交互
Angular提供了输入（@Input）和输出（@Output）语法来处理组件数据的流入流出。组件间数据交互的方式还有路由参数、共享服务。
打个比方游戏机：
它不关心谁在操作，只关心按了什么键。同样，它也不关心要把我们操作结果显示给谁看，只管显示在屏幕上。总结：黑盒模型。在Angular而我们的组件就是要设计成黑盒模型。
1：基础用法
@Input父组件传递数据到子组件的方式。（单向传递）写在子组件中
@Output 子组件传递数据到父组件。重点通过EventEmitter（发射器）从子组件发射数据到父组件中。通过EventEmitter. Emit() 执行发射。写在子组件中
示例：
//child.component.ts
impoer { Component, Input, OnInit } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.components.css']
})
export class OrderComponent implements OnInit {
@Input()
stockCode: string;
@Input()
amount: number;
names: number = 300;
constrouctor() {
}
}
//child_1.component.ts
import { Component, EventEmitter, OnInit, Output } from '@angular/core';
@Component({
selector: 'app-price-quote',
templateUrl: './price-quote.component.html',
styleUrls: ['./price-quote.component.css']
})
export class PriceQuoyeComponent implements OnInit {
stockCode = '0002045';
price: number;
@Output()
lastPrice: EventEmitter<any> = new EventEmitter();
@Output()
buy: EventEmitter<PriceQuote> = new EventEmitter();
constructor() {
setInterval(() => {
const priceQuote: PriceQuote = new PriceQuote(this.stockCode, 100 * Math.random());
this.price = priceQuote.lastPrice;
this.lastPrice.emit(priceQuote);
}, 1000);
}
}
2：非父子关系组建传递数据
如果是通过@Input、@Output来进行的话是不鼓励的，推荐使用共享服务。把两个没关系的组件找他们共同的“爸爸”，来当中间人。
3：通过局部变量实现数据交互
模板表达式的方式：“#”+自定义名称，就可以代表它所被申明所在的组件或者DOM元素的实例。
功能：能够让父组件调用（读）到子组件的参数或者方法。
//parent.component.ts
<!--输入属性-->
<div>
<input type="text" placeholder="请输入股票代码" [(ngModel)]="stock">
<app-order [stockCode]="stock" [amount]="derry.names" #derry></app-order>
</div>
4：通过@viewChild注入的方法
特点：能让父组件去读写我们子组件中的方法或者参数。
使用：
- 位置是写在父组件中。
- 方式：@viewChild(OrderComponent) order: OrderComponent;
三：组件生命周期
从组件创建开始Angular的变更检测机制就会监控组件。组件的生命周期由Angular内部管理，从组件的创建、渲染，到数据变动事件的触发，再到组件从DOM中移除，Angular都提供了一些列的钩子（接口）。这些钩子可以让开发者很方便地在这些事件触发时，执行相应的回调函数。
生命周期钩子.png
上图中，蓝色的钩子以及红色的是只执行一次的，绿色钩子是会重复执行的。
整个组件的生命周期分为三个阶段：
- 初始化阶段
- 变更检测阶段
- 销毁阶段
初始化阶段结束后会让组件显示在用户面前，钩子的执行顺序为：
Constructor -> ngOnChanges（可选当有@Input发生时） -> ngOnInit -> ngDoCheck -> ngAfterContentInit -> ngAfterContentChecked -> ngAfterViewInit -> ngAfterViewChecked
具体的钩子含义：
| 钩子 | 目的和动机 |
|---|---|
| ngOnChanges() | 当Angular（重新）设置数据绑定输入属性时响应。该方法接受当前和上一属性值的SimpleChanges对象。当被绑定的输入属性的值发生变化时调用，首次调用一定会发生在ngOnInit()之前。 |
| ngOnOInit() | 在Angular第一次显示数据绑定和设置指令/组件的输入属性之后，初始化指令/组件。在第一轮ngOnChanges()完成之后调用，只调用一次。 |
| ngDoCheck() | 检测，并在发生Anguluar无法或不愿意自己检测的变化时作出反应。在每个Angular变更检测周期调用，ngOnChanges()和ngOnInit()之后。 |
| ngAfterContentInit() | 当把内容投影进组件之后调用。第一次ngDoCheck()之后调用，只调用一次。只适用于组件。 |
| ngAfterContentChecked() | 每次完成被投影组件内容的变更检测之后调用。ngAfterContentInit()和每次ngDoCheck()之后调只适合组件。 |
| ngAfterViewInit() | 初始化完组件视图及其子视图之后调用。第一次ngAfterContentChecked()之后调用，只调用一次。只适合组件。 |
| ngAfterViewChecked() | 每次做完组件视图和子视图的变更检测之后调用。ngAfterViewInit()和每次ngAfterContentChecked()之后调用。只适合组件。 |
| ngOnDestroy | 当Angular每次销毁指令/组件之前调用并清扫。 在这儿反订阅可观察对象和分离事件处理器，以防内存泄漏。 |
在Angular销毁指令/组件之前调用。
钩子函数实际上就是接口，而从纯技术的角度上来说，接口对于Javascript和Typescript都是可选的。Javascript语言本身没有接口。 Angular在运行时候看不到Typescript 接口。
- 了解可变和不可变对象。
从内存的角度来分析：
可变：对象Object。
不可变：string /number/ Boolean/…
- OnChange钩子。
前提：输入属性 @Input/ @viewChild
只有输入的不可变对象，发生改变时（内存消耗的时候）才会触发。
- 变化监测Zone
出身：Zones实际上是Dart的一种语言特性
核心概念：Zone 是下一个 ECMAScript 规范的建议之一，Angular团队实现了Javascript版本的zone称为zone.js。
作用：它是用于拦截和跟踪异步工作的机制，也就是说Zone能够hook到异步任务的执行上下文，并在一些关键节点上重写相应的钩子方法，以此来完成某些操作。
那么问题来了：什么情况瞎才需要变化监测：模型改变的！！！
什么操作（事件）会改变模型：
三类：
- Events: click、mouseover、keyup…（改变View）
- Timers: setInterval、 setTimeout
- XHRs: Ajax(GET、POST…) （数据交互）
总结这些事件源有一个共同的特点，即它们都是异步操作。那我们可以这样认为，所有的异步操作都有可能会引起模型的变化。
- ngZone
ngZone民间介绍: http://blog.csdn.net/qq_34398308/article/details/51546091
Zone的功能：
- 拦截异步任务调度
- 提供了将数据附加到 zones 的方法
- 为异常处理函数提供正确的上下文
- 拦截阻塞的方法，如 alert、confirm 方法。
ngZone是Zone子类，原理：(Monkey-patched)猴子补丁的方式暴力的将所有的异步事件都包裹了。
我们的Angular项目是有组件树构成的，然后每当我们创建一个组件的时候Zone.fork()克隆一个子zone属于我们父组件中的zone监控中。
默认情况下zone重写了以下方法: setInterval、clearInterval、setTimeout、clearTimeout
alert、prompt、confirm
requestAnimationFrame、cancelAnimationFrame
addEventListener、removeEventListener
- doCheck
注意：不要轻易的使用，就算使用也要写得足够轻量级。
它会监听所有的可能跟我本身组件相关的事件，所以会不停（无意义）的触发。
Angular中两种变更检测的策略：
- Default：会检测所有组件树。（默认）
- OnPush: 当该组件的输入属性变化时才检测。
- AfterView钩子
主要是监听 @viewChild 改变时的钩子。
注意:
-
先Init/Checked。都是在视图创建完毕后调用。
-
如果有子组件，会先子后父。
-
钩子里面不能做会导致组件视图更新的操作。（也就是说我们不能直接写改变代码，你需要写在另外的上下文中 setTimeout。）
-
AfterContent钩子
监听<ng-content></ng-content>
四、 组件内容嵌入
内容嵌入又称投影（ng-content）是组件的一个高级功能特性，使用组件的内容嵌入特性能很好地扩充组件的功能，方便代码的复用。它和AngularJS 1.x中指令的transclude 属性非常类似。
内容嵌入通常用来创建可复用的组件，典型的例子是模态对话框或导航栏。
具体内容以及使用请参考learnComponent中的embed文件夹。
重点API：<ng-content></ng-content>
网友评论