Angular--数据绑定

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Luojun13Class/article/details/81950837

前言

Angular学习的时候，在数据与数据之间的处理联系是非常重要的，而且处理数据之间的逻辑不是很清楚明白的话，很容易弄混，所以这篇博客总结一下数据与数据之间的关系，简单介绍一下这方面的信息。

内容

数据绑定

数据绑定是允许将组建控制器的属性和方法与组建的模块联系起来，有三种模式，如下：
1.使用查值表达式将一个表达式的值显示在模版上

<h1>{{product.Title}}</h1>

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

<img [src] = "imgUrl">

3.使用小括号将组件控制器的一个方法绑定为模版上一个事件的处理器

<button (click)="toProductDetail()">商品详情</button>

在上面的三种绑定里面也可以看出，都是在HTML界面上绑定TS（TypeScript）里面的属性，这种绑定叫做事件绑定（从html绑定到ts）。我们是否可以猜想一下，既然有事件绑定，而且Angular是的绑定是双向绑定的，那么肯定会有从TS绑定到HTML中的，这个绑定成为属性绑定（从ts绑定到html）。既然聊到了事件绑定，那么也简单的介绍一下：

事件绑定

首先来看一张图，这种图能很好的介绍事件绑定的一些内容，如下。

小括号中的input:表示在TS里面有相应的属性定义，然后在HTML页面帮顶起来，比如input：number;表示定义了input的属性为数字类型。
$event：表示在TS里面有相应的触发表达式，比如：

doOnClick(event:any){
    console.log(event);
}

表示点击一下就会显示出event所点击处的值。
同时我们应当注意一下，查值表达式和属性绑定是统一概念，如下例子：

HTML：
<img[src]="imgUrl"><br>
<imgsrc="{{imgUrl}}"><br>
<!--上面两个式子表示调取的内容都是一样的，如下给出的TS里面的内容-->
TS：
imgUrl:string='http://placehold.it/400x220';

总结

事件绑定看起来简单，但是用起来就没有那么得心应手，需要好好的去学，并且在使用的时候需要逻辑清晰。

end

谢谢您的阅读！