Angular 数据绑定

Angular 数据绑定

数据绑定

<h1>{{productTitlt}}!</h1>

使用插值表达式将一个表达式的值显示在模版上。

<img [src] = "imgUrl">

使用方括号将HTML标签的一个属性绑定到一个表达式上。

<button (click)="toProductDetail()">商品详情</button>

使用小括号将组件控制器的一个方法绑定为模版上一个事件的处理器。

事件绑定

<input (input)="onInputEvent($event)">

• 小括号表示这是一个事件绑定。
• input表示事件的名称。
• onInputEvent表示当事件发生时，执行的表达式。其中$event表示的是浏览器事件对象。

首先声明一个组件ng g component bind

编写页面模版，添加点击事件按钮。

<p>
  bind works!
</p>
<button (click)="doOnClick($event)">点我</button>

在组件中实现点击事件的方法，并将浏览器事件对象输出到控制台显示。

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

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

  constructor() {
  }

  ngOnInit() {
  }

  doOnClick(event: any) {
    console.log(event);
  }

}

属性绑定

插值表达式和属性绑定是一个东西。

修改页面模版，使用属性绑定。

<p>
  bind works!
</p>
<img [src]="imgUrl">

并且在组件中定义imgUrl

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

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

  imgUrl: string = 'http://placehold.it/400x320';

  constructor() {
  }

  ngOnInit() {
  }

  doOnClick(event: any) {
    console.log(event);
  }

}

使用插值表达式改写页面模版。

<p>
  bind works!
</p>
<img [src]="imgUrl">
<img src="{{imgUrl}}">

Angular会将插值表达式翻译为对应的属性绑定。

HTML属性和DOM属性的关系

• 少量HTML属性和DOM属性之间有着1:1的映射，如id。
• 有些HTML属性没有对应的DOM属性，如colspan。
• 有些DOM属性没有对应的HTML属性，如textContent。
• 就算名字相同，HTML属性和DOM属性也不是同一样东西。
• HTML属性的值指定了初始值；DOM属性的值表示当前值。
• DOM属性的值可以改变；HTML属性的值不能改变。
• 模版绑定是通过DOM属性和事件来工作的，而不是HTML属性。

HTML属性绑定

基本HTML属性绑定

<td [attr.colspan]="tableColspan">Something</td>

CSS类绑定

<div class="aaa bbb" [class]="someExpression">something</div>

<div [class.special]="isSpecial">something</div>

<div [ngClass]="{aaa: isA, bbb: isB}">

样式绑定

<button [style.color]="isSpecial?'red':'green'">RED</button>

<div [ngStyle]="{'font-style': this.canSave?'italic':'normal'}">

双向绑定

<p>
  bind works!
</p>
<input [(ngModel)]="name">
{{name}}

响应式编程

观察者模式与Rxjs

var subscription = Observable.from([1,2,3,4])
    .filter((e) => e%2 == 0)
    .map((e) => e*e)
    .subscribe(
        e => console.log(e),
        error => consile.error(error),
        () => console.log("end!")
    );

• 可观察对象Observable（流）：表示一组值或者事件的集合。
• 观察者Observer：一个回调函数集合，它知道怎么去监听被Observable发送的值。
• 订阅Subscription：表示一个可观察对象，主要用于取消注册。
• 操作符Operators：纯粹的函数，使开发者可以以函数编程的方式处理集合。

简单来说响应式编程就是异步数据流编程。

模版本地变量

<p>
  bind works!
</p>
<input #myField (keyup)="onKey(myField.value)">
{{value}}

模版本地变量必须使用#号来声明，也就是这里的#myField。这样的话方法就不用再传递event对象了。

管道

<p>
  bind works!
</p>
<p>我的生日是：{{birthday | date | uppercase}}</p>

在组件中添加birthday元素。

private birthday: Date = new Date();

通常我们需要使用管道实现对数据的格式化，Angular4中的管道和之前有了一些变化，下面说一些常用的管道。

大小写转换管道

uppercase将字符串转换为大写
lowercase将字符串转换为小写

<p>将字符串转换为大写{{str | uppercase}}</p>

str:string = 'hello';

页面上会显示
将字符串转换为大写HELLO

日期管道

date日期管道符可以接受参数，用来规定输出日期的格式。

<p>现在的时间是{{today | date:'yyyy-MM-dd HH:mm:ss'}}</p>

today:Date = new Date();

页面上会显示现在的时间是2017年05月08日10时57分53秒

小数管道

number管道用来将数字处理为我们需要的小数格式
接收的参数格式为{最少整数位数}.{最少小数位数}-{最多小数位数}
其中最少整数位数默认为1
最少小数位数默认为0
最多小数位数默认为3
当小数位数少于规定的{最少小数位数}时，会自动补0
当小数位数多于规定的{最多小数位数}时，会四舍五入

<p>圆周率是{{pi | number:'2.2-4'}}</p>

pi:number = 3.14159;

页面上会显示
圆周率是03.1416

货币管道

currency管道用来将数字转换为货币格式

<p>{{a | currency:'USD':false}}</p>
<p>{{b | currency:'USD':true:'4.2-2'}}</p>

a:number = 8.2515
b:number = 156.54812

页面上将显示
USD8.25
0156.55这里的′USD′是美元UnitedStatesdollar的缩写，当为false时不显示0156.55这里的′USD′是美元UnitedStatesdollar的缩写，当为false时不显示符，当为true时，则显示$符。后面的规定小数位数的参数和上面介绍的一样。

自定义管道

创建pipe组件ng g pipe pipe/multiple

multiple.pipe.ts

import {Pipe, PipeTransform} from '@angular/core';

@Pipe({
  name: 'multiple'
})
export class MultiplePipe implements PipeTransform {

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

}

使用自己编写的管道。

<p>
  bind works!
</p>
<input #myField (keyup)="onKey(myField.value)">
<p>这是我输入的值：{{value | multiple}}</p>

这时的默认系数是1，将系数改为3。

<p>
  bind works!
</p>
<input #myField (keyup)="onKey(myField.value)">
<p>这是我输入的值：{{value | multiple: '3'}}</p>

这样每次输出的值都是乘后的值。