填写这份《一分钟调查》,帮我们(开发组)做得更好!去填写Home

绑定语法:概述

Binding syntax: an overview

数据绑定是一种机制,用来协调用户可见的内容,特别是应用数据的值。 虽然也可以手动从 HTML 中推送或拉取这些值,但是如果将这些任务转交给绑定框架,应用就会更易于编写、阅读和维护。 你只需声明数据源和目标 HTML 元素之间的绑定关系就可以了,框架会完成其余的工作。

Data-binding is a mechanism for coordinating what users see, specifically with application data values. While you could push values to and pull values from HTML, the application is easier to write, read, and maintain if you turn these tasks over to a binding framework. You simply declare bindings between binding sources, target HTML elements, and let the framework do the rest.

包含本指南中的代码段的工作示例,请参阅现场演练 / 下载范例

See the现场演练 / 下载范例for a working example containing the code snippets in this guide.

Angular 提供了多种数据绑定方式。绑定类型可以分为三类,按数据流的方向分为:

Angular provides many kinds of data-binding. Binding types can be grouped into three categories distinguished by the direction of data flow:

  • 数据源到视图

    From the source-to-view

  • 视图到数据源

    From view-to-source

  • 双向:视图到数据源到视图

    Two-way sequence: view-to-source-to-view

绑定类型

Type

语法

Syntax

分类

Category

插值
属性
Attribute
CSS 类
样式

Interpolation
Property
Attribute
Class
Style

{{expression}} [target]="expression" bind-target="expression"
      
      {{expression}}
[target]="expression"
bind-target="expression"
    

单向
从数据源
到视图

One-way
from data source
to view target

事件

Event

(target)="statement" on-target="statement"
      
      (target)="statement"
on-target="statement"
    

从视图到数据源的单向绑定

One-way
from view target
to data source

双向

Two-way

[(target)]="expression" bindon-target="expression"
      
      [(target)]="expression"
bindon-target="expression"
    

双向

Two-way

除插值以外的其它绑定类型在等号的左侧都有一个“目标名称”,由绑定符 []() 包起来, 或者带有前缀:bind-on-bindon-

Binding types other than interpolation have a target name to the left of the equal sign, either surrounded by punctuation, [] or (), or preceded by a prefix: bind-, on-, bindon-.

绑定的“目标”是绑定符内部的属性或事件:[]()[()]

The target of a binding is the property or event inside the binding punctuation: [], () or [()].

在绑定时可以使用来源指令的每个公共成员。 你无需进行任何特殊操作即可在模板表达式或语句内访问指令的成员。

Every public member of a source directive is automatically available for binding. You don't have to do anything special to access a directive member in a template expression or statement.

数据绑定与 HTML

Data-binding and HTML

在正常的 HTML 开发过程中,你使用 HTML 元素来创建视觉结构, 通过把字符串常量设置到元素的 attribute 来修改那些元素。

In the normal course of HTML development, you create a visual structure with HTML elements, and you modify those elements by setting element attributes with string constants.

<div class="special">Plain old HTML</div> <img src="images/item.png"> <button disabled>Save</button>
      
      <div class="special">Plain old HTML</div>

<img src="images/item.png">
<button disabled>Save</button>
    

使用数据绑定,你可以控制按钮状态等各个方面:

With data-binding, you can control things like the state of a button:

<!-- Bind button disabled state to `isUnchanged` property --> <button [disabled]="isUnchanged">Save</button>
src/app/app.component.html
      
      <!-- Bind button disabled state to `isUnchanged` property -->
<button [disabled]="isUnchanged">Save</button>
    

请注意,这里绑定到的是按钮的 DOM 元素的 disabled 这个 Property,而不是 Attribute。 这是数据绑定的通用规则。数据绑定使用 DOM 元素、组件和指令的 Property,而不是 HTML 的Attribute

Notice that the binding is to the disabled property of the button's DOM element, not the attribute. This applies to data-binding in general. Data-binding works with properties of DOM elements, components, and directives, not HTML attributes.

HTML attribute 与 DOM property 的对比

HTML attribute vs. DOM property

理解 HTML 属性和 DOM 属性之间的区别,是了解 Angular 绑定如何工作的关键。Attribute 是由 HTML 定义的。Property 是从 DOM(文档对象模型)节点访问的。

The distinction between an HTML attribute and a DOM property is key to understanding how Angular binding works. Attributes are defined by HTML. Properties are accessed from DOM (Document Object Model) nodes.

  • 一些 HTML Attribute 可以 1:1 映射到 Property;例如,“ id”。

    A few HTML attributes have 1:1 mapping to properties; for example, id.

  • 某些 HTML Attribute 没有相应的 Property。例如,aria-*

    Some HTML attributes don't have corresponding properties; for example, aria-*.

  • 某些 DOM Property 没有相应的 Attribute。例如,textContent

    Some DOM properties don't have corresponding attributes; for example, textContent.

重要的是要记住,HTML AttributeDOM Property 是不同的,就算它们具有相同的名称也是如此。 在 Angular 中,HTML Attribute 的唯一作用是初始化元素和指令的状态。

It is important to remember that HTML attribute and the DOM property are different things, even when they have the same name. In Angular, the only role of HTML attributes is to initialize element and directive state.

模板绑定使用的是 Property事件,而不是 Attribute

Template binding works with properties and events, not attributes.

编写数据绑定时,你只是在和目标对象的 DOM Property事件打交道。

When you write a data-binding, you're dealing exclusively with the DOM properties and events of the target object.

该通用规则可以帮助你建立 HTML Attribute 和 DOM Property 的思维模型: 属性负责初始化 DOM 属性,然后完工。Property 值可以改变;Attribute 值则不能。

This general rule can help you build a mental model of attributes and DOM properties: Attributes initialize DOM properties and then they are done. Property values can change; attribute values can't.

此规则有一个例外。 可以通过 setAttribute() 来更改 Attribute,接着它会重新初始化相应的 DOM 属性。

There is one exception to this rule. Attributes can be changed by setAttribute(), which re-initializes corresponding DOM properties.

欲知详情,参见 MDN 接口文档,其中包含所有标准 DOM 元素及其 Property 的 API 文档。 <td> Attribute<td> Property 之间的比较是一个很有用的例子。 特别是,你可以通过 “DOM 接口” 链接从 Attribute 页面导航到 Property 页面,并在继承层次中导航到 HTMLTableCellElement

For more information, see the MDN Interfaces documentation which has API docs for all the standard DOM elements and their properties. Comparing the <td> attributes to the <td> properties provides a helpful example for differentiation. In particular, you can navigate from the attributes page to the properties via "DOM interface" link, and navigate the inheritance hierarchy up to HTMLTableCellElement.

范例 1:<input>

Example 1: an <input>

当浏览器渲染 <input type="text" value="Sarah"> 时,它会创建一个对应的 DOM 节点,其 value Property 已初始化为 “Sarah”。

When the browser renders <input type="text" value="Sarah">, it creates a corresponding DOM node with a value property initialized to "Sarah".

<input type="text" value="Sarah">
      
      <input type="text" value="Sarah">
    

当用户在 <input> 中输入 Sally 时,DOM 元素的 value Property 将变为 Sally。 但是,如果使用 input.getAttribute('value') 查看 HTML 的 Attribute value,则可以看到该 attribute 保持不变 —— 它返回了 Sarah

When the user enters "Sally" into the <input>, the DOM element value property becomes "Sally". However, if you look at the HTML attribute value using input.getAttribute('value'), you can see that the attribute remains unchanged—it returns "Sarah".

HTML 的 value 这个 attribute 指定了初始值;DOM 的 value 这个 property 是当前值。

The HTML attribute value specifies the initial value; the DOM value property is the current value.

要通过可运行的应用查看 Attribute 和 DOM Property 的差别,请参阅现场演练 / 下载范例,特别注意其绑定语法。

To see attributes versus DOM properties in a functioning app, see the现场演练 / 下载范例especially for binding syntax.

范例 2:禁用按钮

Example 2: a disabled button

disabled Attribute 是另一个例子。按钮的 disabled Property 默认为 false,因此按钮是启用的。

The disabled attribute is another example. A button's disabled property is false by default so the button is enabled.

当你添加 disabled Attribute 时,仅仅它的出现就将按钮的 disabled Property 初始化成了 true,因此该按钮就被禁用了。

When you add the disabled attribute, its presence alone initializes the button's disabled property to true so the button is disabled.

<button disabled>Test Button</button>
      
      <button disabled>Test Button</button>
    

添加和删​​除 disabled Attribute 会禁用和启用该按钮。 但是,Attribute 的值无关紧要,这就是为什么你不能通过编写 <button disabled="false">仍被禁用</button> 来启用此按钮的原因。

Adding and removing the disabled attribute disables and enables the button. However, the value of the attribute is irrelevant, which is why you cannot enable a button by writing <button disabled="false">Still Disabled</button>.

要控制按钮的状态,请设置 disabled Property

To control the state of the button, set the disabled property,

虽然技术上说你可以设置 [attr.disabled] 属性绑定,但是它们的值是不同的,Property 绑定要求一个布尔值,而其相应的 Attribute 绑定则取决于该值是否为 null。例子如下:

Though you could technically set the [attr.disabled] attribute binding, the values are different in that the property binding requires to be a boolean value, while its corresponding attribute binding relies on whether the value is null or not. Consider the following:

<input [disabled]="condition ? true : false"> <input [attr.disabled]="condition ? 'disabled' : null">
      
      <input [disabled]="condition ? true : false">
<input [attr.disabled]="condition ? 'disabled' : null">
    

通常,要使用 Property 绑定而不是 Attribute 绑定,因为它更直观(是一个布尔值),语法更短,并且性能更高。

Generally, use property binding over attribute binding as it is more intuitive (being a boolean value), has a shorter syntax, and is more performant.

要通过可运行的应用查看 disabled 按钮示例,请参见现场演练 / 下载范例,特别注意其绑定语法。本示例展示了如何从组件中切换禁用属性。

To see the disabled button example in a functioning app, see the现场演练 / 下载范例especially for binding syntax. This example shows you how to toggle the disabled property from the component.

绑定类型和目标

Binding types and targets

数据绑定的目标是 DOM 中的某些东西。根据绑定类型,目标可以是属性(元素,组件或指令),事件(元素,组件或指令)或有时是属性名称。下表总结了不同绑定类型的目标。

The target of a data-binding is something in the DOM. Depending on the binding type, the target can be a property (element, component, or directive), an event (element, component, or directive), or sometimes an attribute name. The following table summarizes the targets for the different binding types.

类型

Type

目标

Target

范例

Examples

属性

Property

元素属性
组件属性
指令属性

Element property
Component property
Directive property

srcherongClass,代码如下:

<img [src]="heroImageUrl"> <app-hero-detail [hero]="currentHero"></app-hero-detail> <div [ngClass]="{'special': isSpecial}"></div>
      
      <img [src]="heroImageUrl">
<app-hero-detail [hero]="currentHero"></app-hero-detail>
<div [ngClass]="{'special': isSpecial}"></div>
    

src, hero, and ngClass in the following:

<img [src]="heroImageUrl"> <app-hero-detail [hero]="currentHero"></app-hero-detail> <div [ngClass]="{'special': isSpecial}"></div>
      
      <img [src]="heroImageUrl">
<app-hero-detail [hero]="currentHero"></app-hero-detail>
<div [ngClass]="{'special': isSpecial}"></div>
    

事件

Event

元素事件
组件事件
指令事件

Element event
Component event
Directive event

clickdeleteRequestmyClick,代码如下:

<button (click)="onSave()">Save</button> <app-hero-detail (deleteRequest)="deleteHero()"></app-hero-detail> <div (myClick)="clicked=$event" clickable>click me</div>
      
      <button (click)="onSave()">Save</button>
<app-hero-detail (deleteRequest)="deleteHero()"></app-hero-detail>
<div (myClick)="clicked=$event" clickable>click me</div>
    

click, deleteRequest, and myClick in the following:

<button (click)="onSave()">Save</button> <app-hero-detail (deleteRequest)="deleteHero()"></app-hero-detail> <div (myClick)="clicked=$event" clickable>click me</div>
      
      <button (click)="onSave()">Save</button>
<app-hero-detail (deleteRequest)="deleteHero()"></app-hero-detail>
<div (myClick)="clicked=$event" clickable>click me</div>
    

双向

Two-way

事件与属性

Event and property

<input [(ngModel)]="name">
      
      <input [(ngModel)]="name">
    
Attribute

Attribute (少数特例情况)

Attribute (the exception)

<button [attr.aria-label]="help">help</button>
      
      <button [attr.aria-label]="help">help</button>
    

Class

class 属性

class property

<div [class.special]="isSpecial">Special</div>
      
      <div [class.special]="isSpecial">Special</div>
    

样式

Style

style 属性

style property

<button [style.color]="isSpecial ? 'red' : 'green'">
      
      <button [style.color]="isSpecial ? 'red' : 'green'">