Angular 中的数据绑定

原文链接:Data Binding in Angular – 原文作者 Amit Dhiman

本文采用意译的方式

  1. 插值绑定: 将动态的值插入到模版内容中,我们使用 {{}}
  2. 属性(Property)绑定: 绑定组件属性到 HTML 元素属性中,我们使用 []
  3. 事件绑定:监听 DOM 事件,并在组件中触发方法,我们使用 ()
  4. 双向绑定:结合 属性绑定事件绑定 来实现数据流的双向绑定,我们在表单控件中使用[(ngModel)]
  5. 样式绑定:为 HTML 元素动态设定 CSS 行内样式,我们使用 [style.style-property]="value"
  6. 类名绑定:基于条件或者组件属性,为 HTML 元素动态添加或者移除 CSS 类名,我们分别使用 [class.class-name]="condition"[ngClass]="{ 'class-name': condition }"
  7. 属性(Attribute)绑定: 动态设置 HTML 元素属性,我们使用 [attr.attribute-name]="value"

译者加:注意 属性(Property)绑定属性(Attribute)绑定,前者是绑定到 DOM 元素属性,后者是绑定到 HTML 属性。What is the difference between property and attribute binding in AngularJS? 两者都可以简单理解为:将属性绑定到 HTML 元素上即可。

两种类型的数据绑定

单向数据绑定

从组件(数据)到视图:绑定组件数据到视图上,我们使用插值 Interpolation 和属性 Property 绑定。

从试图到组件(数据):绑定试图数据到组件数据上,我们使用事件 Event 绑定。

双向数据绑定

我们使用 ngModel 来实现双向数据绑定。

插值和属性绑定

Angular 中,插值 Interpolation 和属性 Property 绑定都用来传递组件类数据到模板(视图)中。嗯~区别是它们怎么实现这个任务,我们在哪里使用它们。

下面是 AngularInterpolation 插值绑定和 Property 绑定的主要区别:

语法

  • Interpolation 绑定:插值绑定在模板 HTML 内容中,使用{{}}来包含表达式或者变量。比如:{{ title }}
  • Property 绑定:属性绑定在 HTML 元素中实现组件属性,使用 [] 来绑定一个属性。比如:[src]="imageUrl"

用法

  • Interpolation 绑定:用于将动态内容插入到模板的 HTML 中,例如在文本元素中显示组件属性。
  • Property 绑定:用于根据组件属性设置 HTML元素的属性,例如给予组件属性 attributes 或者属性值 property value,比如 src, href, disabled 等。

方向

  • Interpolation 绑定:单向绑定,从组件数据 -> 视图。组件属性数据的更改都会反映在视图上。
  • Property 绑定:也是单向绑定,从组件数据 -> 视图。组件数据绑定到元素的属性上。对组件属性数据的更改会更改相应的元素属性。

表达式 vs 属性

  • Interpolation 绑定:它是为单个表达式或者变量而设计的。你不可以使用它绑定属性,只能用来显示动态内容。
  • Property 绑定:它允许你直接绑定元素属性。你可以用它来设定 HTML 元素中 attributesproperties 的值。

例子

  • Interpolation 绑定
<p>Hello, {{ name }}</p>  
<p style.color="{{redcolor}}">red</p>  
<span class="{{givemered}}">red</span>  
<img src="{{imageUrl}}">This is Red</p>  
Welcome {{getFirstName()}}  
pipe : {{title | uppercase}}  
{{data?.data}} // safe navigation operator

在这个例子中,name 被插入到段落的文本内容中。

  • Property 绑定
<img [src]="imageUrl" [alt]="imageAlt">  
<button [disabled]="isDisabled">I am disabled </button>

在这个例子中,imageUrlimageAlt 分别是 <img> 元素的 srcalt 属性值。

总得来说,Interpolation 插值绑定用来在模板中展示动态的内容,而 Property 属性绑定是用来将组件属性绑定到元素的 propertiesattributes 上。两者在 Angular 应用中都很重要,我们根据使用场景来选择使用。

事件绑定

事件绑定允许我们将事件(比如按键、点击、悬停、触摸等)绑定到数组中的一个方法。它是从视图到组件的单向绑定。

<button (click)="clickMe()">Click me</button>  
<p> You have clicked {{clickCout}}</p>
clickCount = 0  
clickMe(){  
this.clickCount++;  
}

通过事件绑定传递数据:

<input (input)="handleInput($event)">  
<p> You have entered {{value}}</p>
value = ""  
handleInput(event){  
this.value = (event.target as HTMLInputElement).value;  
}

将模板引用变量传递给函数:

<input #e1 (input)="handleInput1(e1)">  
<p> You have entered {{value}}</p>
value = "";  
handleInput1(element){  
this.value = element.value  
}

双向绑定

在双向绑定中,我们使用包含在 FormsModule 包中的 ngModel

<input type="text" name="value" [(ngModel)]="value">  
<p>You entered {{value}}</p>  
<button (click)="clearValue()">Clear</button>
value = ""  
clearValue(){  
this.value = "";  
}

译者加:开篇总结的 1-7 点在实际开发中,使用频率频繁

【✅】

原文链接:https://juejin.cn/post/7343543411664175144 作者:Jimmy

(0)
上一篇 2024年3月8日 上午10:18
下一篇 2024年3月8日 上午10:28

相关推荐

发表评论

登录后才能评论