將狀態綁定到屬性的[]和{{}}之間的區別？

Question

下面是一個模板，例如：

<span count="{{currentCount}}"></span> 
<span [count]="currentCount"></span> 

這裏他們都做同樣的事情。哪一個是首選的，爲什麼？

Answer 1

[]用於從子組件中的值綁定到子組件中的@Input()。它允許傳遞對象。

{{}}對於結合串屬性和HTML等

<div somePropOrAttr="{{xxx}}">abc {{xxx}} yz</div> 

其中結合可以是一個字符串的一部分。

()是用於綁定的事件處理程序時，DOM事件被激發被稱爲或子組件上的EventEmitter發出事件

@Component({ 
    selector: 'child-comp', 
    template: ` 
    <h1>{{title}}</h1> 
    <button (click)="notifyParent()">notify</button> 
    `, 
}) 
export class ChildComponent { 
    @Output() notify = new EventEmitter(); 
    @Input() title; 

    notifyParent() { 
    this.notify.emit('Some notification'); 
    } 
} 


@Component({ 
    selector: 'my-app', 
    directives: [ChildComponent] 
    template: ` 
    <h1>Hello</h1> 
    <child-comp [title]="childTitle" (notify)="onNotification($event)"></child-comp> 
    <div>note from child: {{notification}}</div> 
    `, 
}) 
export class AppComponent { 
    childTitle = "I'm the child"; 

    onNotification(event) { 
    this.notification = event; 
    } 
} 

Plunker example

的更多細節https://angular.io/docs/ts/latest/guide/template-syntax.html#!#binding-syntax