HTML attribute 与 DOM property 的对比（很重要，加强理解）

理解 HTML 属性和 DOM 属性之间的区别，是了解 Angular 绑定如何工作的关键。Attribute 是由 HTML 定义的。Property 是从 DOM（文档对象模型）节点访问的

• 一些 HTML Attribute 可以 1:1 映射到 Property；例如，“ id”。

• 某些 HTML Attribute 没有相应的 Property。例如，aria-* colSpan rowSpan。

• 某些 DOM Property 没有相应的 Attribute。例如，textContent。

重要的是要记住，HTML Attribute 和 DOM Property 是不同的，就算它们具有相同的名称也是如此。 在 Angular 中，HTML Attribute 的唯一作用是初始化元素和指令的状态。

模板绑定使用的是 Property 和事件，而不是 Attribute。

编写数据绑定时，你只是在和目标对象的 DOM Property 和事件打交道。

注意：

该通用规则可以帮助你建立 HTML Attribute 和 DOM Property 的思维模型： 属性负责初始化 DOM 属性，然后完工。Property 值可以改变；Attribute 值则不能。

此规则有一个例外。 可以通过 setAttribute() 来更改 Attribute，接着它会重新初始化相应的 DOM 属性。

案例1：input

当浏览器渲染input时，它会创建一个对应的 DOM 节点，其 value Property 已初始化为 “Sarah”。

当用户在 input 中输入 Sally 时，DOM 元素的 value Property 将变为 Sally。 但是，如果使用 input.getAttribute('value')查看 HTML 的 Attribute value，则可以看到该 attribute 保持不变—— 它返回了 Sarah。

HTML 的 value 这个 attribute 指定了初始值；DOM 的 value 就是这个 property 是当前值。

案例2：禁用按钮

disabled Attribute 是另一个例子。按钮的 disabled Property 默认为 false，因此按钮是启用的。

当你添加 disabled Attribute 时，仅仅它的出现就将按钮的 disabled Property 初始化成了 true，因此该按钮就被禁用了。

Test Button

添加和删除 disabled Attribute 会禁用和启用该按钮。 但是，Attribute 的值无关紧要，这就是为什么你不能通过编写 仍被禁用 来启用此按钮的原因。

要控制按钮的状态，请设置 disabled Property，

模板/插值表达式 {{}} （基础，掌握）

模版中除了绑定变量，还能绑定方法

模版中还可以写些简单的逻辑，比如判断或运算

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
      
变量绑定：{{ title }}
      
方法绑定：{{ getVal }}
      
方法绑定：{{ getVal2() }}
      
简单运算 {{ 1 + 1 }}.
      
简单运算 {{ price * 0.7 }}.
      
简单运算：{{ gender === 0 ? '男':'女' }}
      
与方法结合 {{ price * 0.7 + getVal }}.
      
与方法结合 {{ price * 0.7 + getVal2() }}.
  `,
})
export class AppComponent {
  title = "模板绑定"；
  price = 30;
  gender = 0;
  get getVal(): number { //es6新语法,函数可以当做变量来使用
    return 20;
  }
  getVal2(): number {
    return 33;
  }
}

当使用模板表达式时，请遵循下列指南：

• 非常简单

• 执行迅速

• 没有可见的副作用(即模版中的逻辑不能改变组件的变量)

属性绑定（基础，掌握）

绑定图片

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
    
     // 推荐
    
    `,
  styles: []
})
export class AppComponent {
  madaoSrc = '../assets/images/madao.jpg';
}

绑定普通属性

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
    
    
      
        name
        phone
        age
      
      
        张三
        13398490594
        33
      
      
        李四 // 注意colSpan和colspan
        15079049984
        22
      
    
    click
    `,
  styles: []
})
export class AppComponent {
  madaoSrc = '../assets/images/madao.jpg';
  user = {
   name: 'madao',
   pic: this.madaoSrc
  };
  colSpan = 2;
  isDisabled = false;
}

绑定自定义属性

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
    一行文字
    test title
    test title
    `,
  styles: []
})
export class AppComponent {
  madaoSrc = '../assets/images/madao.jpg';
  customTitle = 'bbb';
}

使用插值表达式（不推荐）

插值也可以用于属性，但常规做法还是用中括号[]，建议整个项目保持风格统一

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
    
    `,
  styles: []
})
export class AppComponent {
  madaoSrc = '../assets/images/madao.jpg';
  user = {
    name: 'madao',
    pic: this.madaoSrc
  };
}

样式绑定（属于属性绑定，基础，掌握）

绑定单个样式

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
      Primary
      secondary
      success
      danger
      danger   //false
      danger  //false
    `,
  styles: []
})
export class AppComponent {
    theme = 'primary';
    isSuccess = true;
}

绑定多个class

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
      btnCls
      btnCls2
      btnCls3

      
      btnCls
      btnCls2
      btnCls3
    `,
  styles: []
})
export class AppComponent {
    btnCls = 'btn btn-primary';
    btnCls2 = ['btn', 'btn-success'];
    btnCls3 = {
      btn: true,
      'btn-info': true
    };
}

绑定单个style

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
      一段文字

      设置高度

      设置高度

    `,
  styles: []
})
export class AppComponent {}

绑定多个style

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
      style1

      style2

      style3

      
      
      

      
      style3

    `,
  styles: []
})
export class AppComponent {
  style1 = 'width: 200px;height: 50px;text-align: center;border: 1px solid;';
  style2 = ['width', '200px', 'height', '50px', 'text-align', 'center', 'border', '1px solid']; // 有问题
  style3 = {
    width: '200px',
    height: '50px',
    'text-align': 'center',
    border: '1px solid'
  };
}

绑定优先级

• 某个类或样式绑定越具体，它的优先级就越高

• 绑定总是优先于静态属性

事件绑定（基础，掌握）

基本用法

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
      Primary
    `,
  styles: []
})
export class AppComponent {
    onClick() {
      console.log('onClick');
    } 
}

事件对象

$event 就是原生的事件对象

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `
      Primary
    `,
  styles: []
})
export class AppComponent {
    onClick(event: MouseEvent) {
      console.log('onClick', event.target);
      //直接用event.target.value会报错，要用类型断言
      console.log((event.target as HTMLInputElement).value)
    }
}

事件捕获或事件冒泡

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  template: `