😁先上例子。
- 插值表达式 :
<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">- Ng的DOM属性绑定采用的是单向绑定，组件中的name属性的值会更新早模板中的name上去。
- Ng的DOM属性绑定，不更新HTML元素的属性，HTML的value属性将一直是空的(DOM属性不更新HTML特性)
- 浏览器会保持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,
...
]
...
⬆⬆⬆
