原文链接:Data Binding in Angular - 原文作者 Amit Dhiman
本文采用意译的方式
{{}}
符绑定
组件属性到 HTML
元素属性中,我们使用 []
符DOM
事件,并在组件中触发方法,我们使用 ()
符[(ngModel)]
HTML
元素动态设定 CSS
行内样式,我们使用 [style.style-property]="value"
HTML
元素动态添加或者移除 CSS
类名,我们分别使用 [class.class-name]="condition"
或 [ngClass]="{ 'class-name': condition }"
设置 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
绑定都用来传递组件类数据到模板(视图)中。嗯~区别是它们怎么实现这个任务,我们在哪里使用它们。
下面是 Angular
中 Interpolation
插值绑定和 Property
绑定的主要区别:
HTML
内容中,使用{{}}
来包含表达式或者变量。比如:{{ title }}
。HTML
元素中实现组件属性,使用 []
来绑定一个属性。比如:[src]="imageUrl"
。HTML
中,例如在文本元素中显示组件属性。HTML
元素的属性,例如给予组件属性 attributes
或者属性值 property value
,比如 src, href, disabled
等。HTML
元素中 attributes
和 properties
的值。<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
被插入到段落的文本内容中。
<img [src]="imageUrl" [alt]="imageAlt">
<button [disabled]="isDisabled">I am disabled </button>
在这个例子中,imageUrl
和 imageAlt
分别是 <img>
元素的 src
和 alt
属性值。
总得来说,Interpolation
插值绑定用来在模板中展示动态的内容,而 Property
属性绑定是用来将组件属性绑定到元素的 properties
和 attributes
上。两者在 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
点在实际开发中,使用频率频繁