Angular数据绑定

2020-03-12 本文已影响0人五月烧

😁先上例子。

插值表达式 : <h1>{{title}}</h1>
属性 : <img [src]="imgUrl">
事件 : <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特性绑定

基本HTML特性绑定：

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

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>

样式绑定

<!-- 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,
         ...
     ]
...

⬆⬆⬆

Angular数据绑定

猜你喜欢

热点阅读