Angular数据绑定

😁先上例子。

1. 插值表达式 : <h1>{{title}}</h1>
2. 属性 : <img [src]="imgUrl">
3. 事件 : <button (click)="handleClick()">点击一下</button>

• 事件绑定

      <button (click)="btnClick($event)">按钮1</button>
  
      <button (click)="switch = true">按钮2</button>
  

  事件右侧可以是方法的调用，也可以是表达式(如 switch = true)。
  绑定的事件可以是标准的DOM事件，也可以是自定义事件。

• 插值表达式和属性表达式
  插值表达式和属性表达式是一个东西，下面两个例子等效

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

• HTML特性和DOM属性的区别
  

  HTML attribute	DOM property
  值永远是字符串或者null	值可以是任意合法的js类型
  不区分大小写	大小写敏感
  不存在是返回null	不存在是返回undefined
  对于href,返回html设置的值	对于href,返回解析后的完整的url
  更新value,属性也更新	更新value,属性不更新

【HTML attribute & DOM property, 关于attribute和property的翻译，这里不做争执😊】   
HTML特性是不变的，HTML特性指定初始值，初始化DOM属性  
DOM属性是变的，表示当前值  
```ts
doOnInput(event:any){
    console.log(event.target.value); // DOM属性
    console.log(event.target.getAttribute('value')); // HTML特性
}
```

• HTML特性和DOM属性的关系
  少量的HTML特性和DOM属性之间有着1:1的映射，如 id
  有些HTML特性 没有对应的DOM属性，如colspan
  有些DOM属性没有对应的HTML特性，如 textContent

  就算名字相同，HTML特性和DOM属性也不是同一样东西。

  HTML特性的值指定了初始值 ; DOM属性的值表示当前值。
  DOM属性的值可以改变 ; HTML特性的值不能改变。
  模板绑定是通过DOM属性 和 事件来工作的，而不是HTML特性。

• Angular的DOM属性绑定
  组件：

  @Component({...})
  export class NameComponent {
      name: string = 'angular';
  }
  

  模板：

  <input [value]="name">
  

  1. Ng的DOM属性绑定采用的是单向绑定，组件中的name属性的值会更新早模板中的name上去。
  2. Ng的DOM属性绑定，不更新HTML元素的属性，HTML的value属性将一直是空的(DOM属性不更新HTML特性)
  3. 浏览器会保持DOM和UI一致。

• HTML特性绑定

  1. 基本HTML特性绑定：

  <!-- public tableColspan:number = 2; -->
  <td [attr.colspan]="tableColspan"></td>
  

  2. CSS类绑定：

  <!-- 1、 [class]的someExpression(一串css类名) 值会完全替换前面class的值 -->
  <div class="aaa bbb" [class]="someExpression">...</div>
  
  <!-- 2、 special是一个类名，isSpecial是一个布尔值, 当isSpecial==true时，该div绑定special类 -->
  <div [class.special]="isSpecial">...</div> 
  
  <!-- 3、 控制绑定多个CSS类-->
  <div [ngClass]="{'classA': isA, 'classB': isB}">...</div>
  

  3. 样式绑定

  <!-- public isSpecial: boolean = true; -->
  <button [style.color]="isSpecial ? 'red' : 'green'">Red</button>
  
  <!-- public canSave: boolean = false -->
  <div [ngStyle]="{'font-style': canSave ? 'italic' : 'normal' }">...</div>
  

• 双向数据绑定

<input [(ngModel)]="name"/>
{{name}}

// ❗注意：ngModel 需要依赖FormsModule模块
import { FormsModule } from '@angular/forms';
...
     imports:[
         ...
         FormsModule,
         ...
     ]
...

⬆⬆⬆