Differenza tra [] e {{}} per vincolare lo stato alla proprietà?

Question

Ecco un esempio modello:

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

Qui entrambi di loro fa la stessa cosa. Quale è il preferito e perché?

Answer 1

[] è per il bind da un valore nel componente padre a un @Input() nel componente figlio. Permette di passare oggetti.

{{}} è per il legame stringhe nelle proprietà e HTML come

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

dove il legame può essere parte di una stringa.

() è per l'associazione di un gestore di eventi di essere chiamato quando un evento DOM viene licenziato o un EventEmitter sul componente bambino emette un evento

@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

Maggiori dettagli in https://angular.io/docs/ts/latest/guide/template-syntax.html#!#binding-syntax