数据绑定

数据绑定

  1. 数据绑定允许将组件控制器的数据和方法与模板连接起来,减少了代码量
  • 使用插值表达式将一个表达式的值表示在模板上

{{msg}}

  • 使用方括号将HTML的标签的属性绑定到一个表达式上,DOM属性绑定


imgurl: string = 'http://placehold.it/400x220';
  • 使用()将组件控制器的一个方法绑定为一个事件的处理器,事件绑定

doOnClick($event: any) {
  console.log(event);
}
  1. DOM和HTML属性的不同,DOM是随着输入的值变化的,而HTML获取的是初始化的数据,是不会随着输出改变的,少量的HTML属性和DOM属性有1:1映射(id),有些HTML属性没有DOM属性(colspan),有些DOM属性没有HTML属性(textContent)

doOnInput($event: any) {
  console.log(event.target.value);
  console.log(event.target.getAttribute('value'));
}

HTML绑定

  1. 基本的HTML属性绑定
  • 优先使用DOM的属性绑定,但是有时候也会使用HTML的数据绑定,这是因为当元素没有DOM属性可以绑定时就必须使用HTML属性绑定
  1. css类绑定
    绑定的class类会完全替代其他类,第二种是class加上一个样式的绑定,后面这个表达式是一个布尔值,当值为true的时候这个div上才会出现这个class,反之则没有,第三种是ngClass绑定,通过表达式来控制多个类是否显示
something
something
  • 三秒钟后显示abc三个类中的 所有样式
divClass: string;
constructor() {
  setTimeOut(() => {
      this.class = "a b c";
    }

    , 3000);
}
  • 在显示ab两个类的样式时,通过isBig来判断是否显示再c类的样式,控制单一属性样式显示
  • 使用ngClass指令同时管理多个类名,效果为从无任何样式在三秒后变为同时具备三个类的样式
divClass2: any= {
  a: false,
  b: false,
  c: false
};
isBig: boolean = false;
constructor() {
  setTimeOut(() => {
      this.divClass2 =true;
    }, 3000);
}

样式绑定

  1. 第一个个表达式用来控制 颜色显示,第二个用来控制font-style样式是通过后面的的表达式来决定样式(是italic还是normal)
  1. angular 的数据绑定默认为单向绑定

你可能感兴趣的:(数据绑定)