2017-07-24

Angular 2（五）：注入器、数据绑定、管道

注入器

1.注入器及其层级关系

第一步：Angular在应用启动时，会生成一个应用级的注入器，将主模块和引用模块中的提供器（provide）全部注入到其中；
- NgModule中的providers内声明的提供器
- imports中的模块（BrowserModule、HttpModule）依赖的提供器
第二步：Angular创建启动模块指定的主组件（AppComponent），同时应用级的注入器会为主组件创建一个组件级的注入器。

并将主组件中声明的提供器注入到组件级的注入其中；
第三步：在主组件中的子组件被创建时，主组件的注入器会为被激活的子组件创建一个组件级的注入器；

并将子组件中的提供器注入其中；

以此类推，最终形成一套注入器层级关系。
2.注入器的使用

Angular只提供在构造函数中注入的方式来创建服务；

1
2
3

constructor(private service:Service){
    //this.service.methodName();
}

除了常用的在构造函数的参数直接声明服务以外，还可以手动调用注入器获取需要的服务

constructor(private injector:Injector){
    this.service = injector.get("Service");
    this.service.methodName();
}

数据绑定

Angular才用的是DOM属性绑定的模式来完成数据绑定。

1.DOM属性绑定流程

1	<input type="text" value='1' (input)="console($event)"/>

console(ev):any{
    ① console.log(ev.target.value);
    ② console.log(ev.target.getAttribute('value'));
}

在input事件发生的时候，在控制台中可以看到①打印的值与文本框保持一致，而②始终是默认的value值；

这是因为HTML属性指向的是初始值，而DOM属性指向的是当前值，且HTML属性不可变；

DOM属性发生变化时的流程
1. （组件）input中的值发生变化
2. DOM属性发生变化，HTML属性不变
3. 浏览器保持DOM属性和UI同步
4. value渲染到页面

2.HTML属性绑定流程

HTML属性发生变化时的流程

1 2	① <div [colspan]="{{1+1}}"></div> ② <div [attr.colspan]="val"></div>

由于Angular使用的是DOM属性绑定，而DOM属性中没有colspan，故①中的写法会报错；

DOM属性发生变化时的流程
1. (控制器)数据发生变化
2. 更新HTML元素，不更新DOM元素
3. （浏览器同步HTML元素和DOM对象）DOM节点发生变化，造成DOM对象的属性发生变化
4. 浏览器同步DOM属性和UI
5. 渲染页面

管道

cli命令创建管道：ng g pipe pipeName

1.管道的标准形式

import { Pipe,PipeTransform } from '@angular/core';
@Pipe({ name: "timeFilter" })
export class TimeFilter implements PipeTransform{
    transform(value:any,argu:any):any{
        return null;
    }
}

2.管道:是数据扩大指定的倍数

extraMultiple.ts

transform(value:number,multiple?:number):number{
      if(!multiple){ multiple = 1; }
      return  value * multiple;
}

app.component.html
1
<p>{{ val | extraMultiple: '3' }}

如果有多个过滤参数：

1	<p>{{ val \| pipeName: 'argu1' : 'agru2' }}</p>

其他：

少量HTML属性和DOM属性有一一对应的关系，如“id”；
有些HTML属性没有对应的DOM属性，如“colspan”；
有些DOM属性没有对应的HTML属性，如“textContent”；
就算属性名字相同，DOM属性和HTML属性不是一样的东西；
HTML属性指定初始值（不可变），DOM属性指向当前值（可变）；

注入器