angular2.0数据绑定语法

Data directionSyntaxBinding typeOne-way
from data source
to view target

COPY CODE

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

Interpolation
Property
Attribute
Class
StyleOne-way
from view target
to data source

COPY CODE

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

EventTwo-way

COPY CODE

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

Two-way例子：

<!-- Bind button disabled state to `isUnchanged` property --><button [disabled]="isUnchanged">Save</button>

Binding targets

The target of a data binding is something in the DOM. Depending on the binding type, the target can be an (element | component | directive) property, an (element | component | directive) event, or (rarely) an attribute name. The following table summarizes:

Binding typeTargetExamplesPropertyElement property
Component property
Directive property

COPY CODE

<img [src] = "heroImageUrl"><hero-detail [hero]="currentHero"></hero-detail><div [ngClass] = "{selected: isSelected}"></div>

EventElement event
Component event
Directive event

COPY CODE

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

Two-wayEvent and property

COPY CODE

<input [(ngModel)]="heroName">

AttributeAttribute (the exception)

COPY CODE

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

Classclass property

COPY CODE

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

Stylestyle property

COPY CODE

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

Let’s descend from the architectural clouds and look at each of these binding types in concrete detail.