angular2--数据绑定

        今天要跟大家分享的是angular2模板中涉及到的数据绑定,Angular提供了多种数据绑定方式,可以根据数据流动的方向分为三种,详见下文:

1) 单向:从数据源到视图目标(属性绑定),插值DOM元素属性绑定,HTML标签特性绑定

2) 单向: 从视图目标到数据源(事件绑定)

3) 双向绑定

上面介绍了系统的分类,下面将具体介绍详细的绑定方式

1.插值绑定(使用双大括号{{ }}的语法)

实现方式:

手机号码:
{{detail.telNum}}

当然表达式也可以调用宿主组件的函数,例如:

{{detail.getName()}}


2.属性绑定(使用[])

       这里详细的说一下,在属性绑定中,"="左侧中括号的作用是让Angular执行"="右侧的模板表达式,并将结果赋值给该目标属性。如果没有中括号,Angular就会把"="右侧的模板表达式当做一个字符串常量,而不会计算该字符串,所以如果是赋值给该目标属性的值是一个字符串,中括号可以省略。

(1)DOM元素属性绑定

    1)实现方式:

       这样就可以将img标签的src属性设置为组件中的srcUrl值。但是使用[]只能绑定在DOM元素已有的属性上,例如

是会报错的,以为div不存在src属性。

    2)设置Angular指令的属性

    

    3)还可以使用属性绑定设置自定义组件的输入属性(这是父子组件间通讯的重要途径,详情可以见上篇组件交互的文章),示例代码如下:

(2) css类绑定

    1)

    2)

>

这两者的区别分别是,第一种当DOM对象属性绑定给[class]绑定值时,changeCreen会覆盖这个div元素的全部class。第二种当isBlue()返回值为true时,className这个类添加到该绑定的标签上,否则移除这个类

(3)Style样式绑定

HTML标签内联样式可以通过Style样式绑定的方式来设置。样式属性可以使用烤肉串命名法(font-size),也可以使用驼峰式(fontSize)命名。

3.事件绑定

事件绑定也是一种单向数据绑定方式,数据从模板流向组件类。

用事件绑定来监听按钮的点击事件,只要触发点击事件,就会调用editContact()方法。其中还有键盘事件,鼠标事件,触屏事件等来执行其对应绑定的方法。

当然,也可以通过@Output在我们的组件中添加自定义事件,@Output顾名思义就是在子组件中向父组件输出东西(这里就不细讲了,想了解的朋友可以看看组件交互那一块)。

4.双向绑定

Angular2是通过[()]来实现的,例如就是双向绑定input元素的值。但是需要注意的是[()]只能绑定在有输入输出功能的DOM元素上(例如:input、textare),如果绑定在div这样的元素上就会报错。

那么,如何通过[()]在我们自定义的指令上实现双向绑定呢?没错,就是使用@Input和@Output来实现。

//父组件

 @Component({

selector: 'my-app',

   template:         

`

value: {{someValue}}

`,

directives:[CustomerCounterComponent] })

export class AppComponent{

someValue = 3;

 }

//子组件

 @Component({

selector: 'customer-counter',

template: `

{{counter}}`

})

export class CustomerCounterComponent{

counterValue = 0;

@Input()

 get counter(){

 return this.counterValue;

 }

@Output()

 counterChange = new EventEmitter();

 set counter(val) {

      this.counterValue = val;

      this.counterChange.emit(this.counterValue);

}

decrement() { this.counter--; } }

这样就可以将父组件中的someValue绑定到子组件的counter属性上,同时当子组件的counter属性发生改变时也更新父组件的someValue值。

需要注意的是,我们定义的事件监听是counterChange,而使用的确实[(counter)]。这是因为Angular 2中约定添加后缀Change,也就是[(counter)]等价于[change]和(counterChange)的组合。如果去看[(ngModel)]的实现,你也会发现它是[ngModel]和[ngModelChange]的组合。

今天更新就到这里,谢谢

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