【Angular 4】数据绑定

概念?

Angular中的数据绑定指的是：同一组件中控制器文件（.ts）与视图文件（.html）之间的数据传递。

数据绑定可以将组件、控制器的属性和方法，和组件的模板连接起来，这样就大大降低了开发时代码量。
例如事件绑定：

---

分类?

1、流向

(1)单向绑定：要么ts文件给html赋值，要么相反。

ts ? html

<div>
	<img src = " {{ imgUrl }} ">
	<img [ src ] = " imgUrl ">
</div>

html ? ts

<input (keyup)=" press($event) ">

小结：ts ? html 使用差值表达式 {{ value }} 或 attr; html ? ts 使用（event） 。ts ? html 更常用。

(2)双向绑定

ts 文件和 html 文件中绑定的值同时改变。
下面的代码代表当 html 文件输入框内容改变时， ts 文件的属性name 的值同时改变。

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

它的作用等同于：
html

<input [value]="name" (input)="doOnInput($event)">

ts

  doOnInput(event: any) {
    this.name = event.target.value;
  }

---

2、目标

(1) DOM属性

差值表达式的效果等同于dom属性绑定。

①修改bind.component.html

<p>
  bind works!
</p>
<!-- 写法一:用[]的方式把属性括起来，通过控制器的imgUrl来给src赋值 -->
<img [src]="imgUrl"><br><br>

<!-- 写法二:用插值表达式来写 -->
<img src="{{imgUrl}}">

②控制器中定义imgUrl – bind.component.ts

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

@Component({
 selector: 'app-bind',
 templateUrl: './bind.component.html',
 styleUrls: ['./bind.component.css']
})
export class BindComponent implements OnInit {
 // 定义imgUrl
 imgUrl:string = "http://placehold.it/400x200";
 constructor() { }
 ngOnInit() {
 }
}

html属性 和 dom 属性的区别
①修改bind模板-- bind.component.html

<p>
  bind works!
</p>
<!-- input标签的value属性设为Rosie -->
<input type="text" value="Rosie" (input)="doOnInput($event)">

②修改bind.component.ts

 doOnInput(event:any) {
        // 1.输出dom属性
        console.log("dom属性："+event.target.value);
        //2.输出html属性
        console.log("html属性："+event.target.getAttribute("value"));
    }

结果：
当修改input 的内容时，控制台打印出

dom属性：Rosie1
html属性：Rosie

dom属性：Rosie12
html属性：Rosie

dom属性：Rosie123
html属性：Rosie

html属性 和 dom 属性的联系

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

---

(2) HTML属性

a. 基本html属性绑定

 <!--html属性绑定-->
    <table border="solid">
      <tr>
        <!-- 以下表达式会报错：colspan不是td的属性
        <td [colspan]="colspanSize">hello</td>
        -->
        <td [attr.colspan]="colspanSize" align="center">hello</td>
      </tr>
      <tr>
        <td>你好</td>
      </tr>
    </table>

// 在控制器中声明变量
 protected colspanSize: number = 2;

b. CSS类绑定

<!--单一类的控制-->
<div class="a b" [class.c]="isBig">判定是否有c类:{{isBig}}</div>
<!--多个类的控制-->
<div [ngClass]="divClasses">是否有类a：{{divClasses.a}}、b：{{divClasses.b}}和c：{{divClasses.c}}</div>
<!--以下两种方式效果相同，均为divClass的值'fontRedClass'-->
<div [class]="divClass">红色字体</div>
<div class="{{divClass}}">红色字体</div>

protected divClass = 'fontRedClass';

  protected divClasses: any = {
    a: Math.random() < 0.5,
    b: Math.random() < 0.5,
    c: Math.random() < 0.5
  };

.fontRedClass {
  color:red;
}
.a {
  background: yellowgreen;
}
.b {
  font-family: 华文隶书;
}
.c {
  font-size: 20px;
}

c. 样式（style）绑定

<!--单一样式绑定-->
<div [style.color]="isRed?'red':'green'">单一样式绑定</div>
<!--多个样式绑定-->
<div [ngStyle]="divStyles">多个样式绑定</div>

protected isRed = Math.random() < 0.5;
protected divStyles: any = {
  color: 'red',
  background: 'yellowgreen'
};