Angular4总结（四）—— 数据绑定，响应式，管道

数据绑定

angular4中默认的数据绑定都是单向的。可分为：

插值表达式形式(Dom属性绑定)

<p>{{test}}<p>

Dom 属性绑定流程：

1. 控制器中定义了一个属性，值发生了改变
2. 对应的dom的value被附上改变了的值
3. 渲染后的页面上也会出现刚刚的值
4. 这一切操作都和html属性不发生任何关系

html属性绑定，使用中括号

<img [src]="imgUrl"/>
//如果没有写这个方括号，angular会把属性右侧的值作为字符串进行赋值，而非表达式

• 基本Html属性绑定

• CSS属性绑定

  • 这种形式是全有或者全无的。

  •   < div [class] = "classA classB classC">  </div>

  • A，B样式固定，C随着boolean的true或者false决定是否显示

  •   < div class="classA classB" [class.classC]="一个boolean值"> </div> 

  • 多个属性由不同的boolean控制

    <div [ngClass]="divClass"></div>
    
    <!--divClass 为一个json对象，在控制层可以写为如下：-->
    divClass:{
        classA: true,
        classB: false,
        classC: true
    }

• 样式绑定

  • style样式全有全无指定

    <div [style.color]="一个boolean值"> </div>

  • 多个属性由不同boolean控制

    <div [ngStyle]="divStyle"></div>
    
    <!--divClass 为一个json对象，在控制层可以写为如下：-->
    divStyle:{
        color: red,
        color-size: 3px
    }

Tips: Dom属性与Html属性的区别

Dom 属性是随着值的变化，会发生改变。而Html属性是在起始的时候你指定的值，以后你拿到的也就一致是这个值。

模版绑定是通过Dom绑定做的，而不是html属性绑定

事件绑定使用小括号

<button (click)="clickEvent($event)">

双向绑定

双向绑定本身其实就是属性绑定和事件绑定的结合，属性绑定是从控制到视图层，而事件绑定是从视图层到控制层

< input [(ngModel)] = "test"> 
<!--test 为控制器的一个参数名称-->

定义element别名

使用#定义别名，在使用的时候不需要加#

< input #testInput (input)=inputEvent(testInput.value)>

响应式编程

在Angular中主要使用rxjs来实现响应式编程。

响应式编程主要其实就是观察者模式的一种延伸，角色可以分为：

• 可观察对象（Obserable） 表示一组值或者事件的集合
• 观察者 （Observer）一个回掉函数集合，他知道怎么去监听被Obserable发送的值

万物皆可流处理

管道

管道是将原始值转换为期望格式的一种方法，用 "|" 符号进行分割，主要用于插值表达式。

管道可以像是链式一样，多个管道进行连接

管道常用的可以分为：

• date 可接受参数，例如 date:'yyyy-MM-dd HH:mm:ss'
• number 可接受参数，例如：number:'2.2-2'
• uppercase
• lowercase
• async 可处理异步流

管道也可以自己定义，在需要使用的地方，只需要加在declations中即可。