Angular data8

数据绑定

1、事件绑定

$event对象的target属性指向的是input节点，等号右侧的不一定是函数调用，也可能是属性赋值：如图，当button被点击时，组件控制器的saved属性会变成true。ps:绑定的事件除了DOM事件外，也可以自定义事件。

2、DOM属性绑定
插值表达式和[img]原则上是一样的;

<img [src]="imgUrl" alt="">
<hr>

![]({{imgUrl}})

html属性和DOM属性的区别；
html属于是不变的，DOM属性是可以改变的

....
//模板中
<input type="text" value="tom" (input)="doOnInput($event)">
...
//组件控制器中
doOnInput(event:any){
    console.log(event.target.value);
    console.log(event.target.getAttribute('value'));
  }

3、HTML属性绑定

3.1 样式绑定

3.1.1 class样式替换

//模板中
<div [class]="divClass">Steven_Qin</div>
...

//组件控制器中
divClass:string;
  constructor() {
    setTimeout(()=>{
      this.divClass = 'a b c';
    },3000)
  }
...

//CSS中
.a{
  background: yellow;
}
.b{
  color: red;
}
.c{
  font-size: 60px;
}

3.1.2 class样式追加

//模块中
<div class="a b" [class.c]="isBig">Steven_Qin</div>
...
//组件控制器中
 isBig:boolean = false;
  constructor() {

    setTimeout(()=>{
      this.isBig = true;
    },3000);
  }

3.1.3 [ngClass] 实现对多个类的分别管理

...
//模板中
<div [ngClass]="divClass">Steven_Qin</div>
...
//组件控制器中
divClass:any = {
    a:false,
    b:false,
    c:false,
  };
  constructor() {

    setTimeout(()=>{
      this.divClass = {
        a:true,
        b:true,
        c:true,
      };
    },3000);
  }

3.2 style内联样式绑定

//模板中
<div [style.color]="isDev?'red':'blue'">Steven_Qin</div>

//组件控制器中
isDev:boolean = false;
  constructor() {

    setTimeout(()=>{
      this.isDev = true;
    },3000);
  }

3.2.1 style带单位的

<div [style.font-size.em]="isDev?3:1">Steven_Qin</div>

3.2.2 [ngStyle]多重内联样式用法

//模板中
<div [ngStyle]="divStyle">Steven_Qin</div>
//组件控制器中
divStyle:any = {
    color:'red',
    background:'green'
  };
  constructor() {

    setTimeout(()=>{
      this.divStyle = {
        color:'green',
        background:'red'
      }
    },3000);
  }

4、双向绑定

 <div>
      <textarea name="innerContent" [(ngModel)]="newComment"></textarea>
    </div>