Différence entre [] et {{}} pour lier l’état à la propriété?

Question

Voici un exemple de modèle:

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

Ici, les deux font la même chose. Lequel est préféré et pourquoi?

Answer 1

[] permet de lier une valeur du composant parent à une @Input() du composant enfant. Cela permet de passer des objets.

{{}} est destiné à la liaison strings dans les propriétés et HTML comme 

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

où la liaison peut faire partie d'une chaîne.

() permet de lier un gestionnaire d'événement à appeler lorsqu'un événement DOM est déclenché ou qu'un EventEmittersur le composant enfant émet un événement. 

@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;
  }
}

Exemple de plunker

Plus de détails dans https://angular.io/docs/ts/latest/guide/template-syntax.html#!#binding-syntax

Answer 2

Différence entre interpolation de chaîne et liaison de propriété:

La principale chose à comprendre ce qui suit:

L'interpolation est une syntaxe spéciale que Angular convertit en propriété . C’est une alternative pratique à la liaison de propriété.

Cela implique que sous le capot, il en résulte un résultat similaire . Cependant, l'interpolation de chaîne a une limitation importante. C’est que tout ce qui se trouve dans l’interpolation de chaîne sera d’abord évalué (en essayant de trouver une valeur dans le fichier modèle ts):

• si cette valeur est introuvable, la valeur dans l'interpolation de chaîne sera évaluée en chaîne.
• Si cette valeur est trouvée dans le modèle, la valeur trouvée est contrainte à une chaîne et est utilisée.

Cela a des implications sur la façon dont vous pouvez utiliser les 2 méthodes. Par exemple:

1. Concaténation de chaînes avec interpolation de chaînes:

     <img src=' https://angular.io/{{imagePath}}'/>
   

2. L'interpolation de chaîne ne peut être utilisée que pour des chaînes

     <myComponent  [myInput]="myObject"></myComponent>
   

Lorsque myInput est une @Input() de myComponent et que nous souhaitons transmettre un objet, nous devons utiliser la liaison de propriété. Si nous utilisions une interpolation de chaîne, l'objet serait transformé en chaîne et transmise comme valeur pour myInput.