Verschiedene Arten von Eigenschaftsbindungen in angular2?

Question

Ich habe begonnen, Angular 2 Beta-Version zu lernen. Angular 2 bietet verschiedene Arten von Eigenschaftsbindungen wie {{title}} und [src] und bind-src.

Ich weiß, dass Eigenschaft Bindings die Daten an das Element bindet und sein Verhalten erstreckt, aber Könnte jemand mir sagen, warum gibt es drei Arten, wenn ein Typ wie [src] für uns die Arbeit machen können, wenn wir die Bindung brauchen . Wenn ich falsch liege, wo werden wir die anderen Typen verwenden?

Answer 1

Die Interpolationsbindung {{template expression}} konvertiert immer das Ergebnis des Template-Ausdrucks in eine Zeichenfolge und wird normalerweise zur Bindung an die Eigenschaft DOM textContent verwendet.

Die Bindung der Eigenschaft [someProperty]="template expression" konvertiert das Ergebnis nicht in eine Zeichenfolge, daher ist es nützlich, wenn Sie beispielsweise ein Array oder ein Objekt an eine untergeordnete Eingabeeigenschaft binden möchten.

bind-src ist nur die canonical form von [src] Bindung.

Answer 2

Die Eigenschaftenbindung kann entweder durch Umbrechen des Attributs in [eckige Klammern] oder durch Voranstellen von bind- an den Attributnamen definiert werden. Die Eigenschaftenbindung ermöglicht es uns, Logik von der Komponentenklasse zur Ansicht zu senden.

import { Component } from '@angular/core'; 

@Component({ 
selector: 'my-app', 
template: ` 

<h1>My First Angular App</h1> 

<img [src]="imageUrl"> 
<img bind-src="imageUrl"> 

}) 

export class AppComponent { 

imageUrl = 'https://angular.io/resources/images/logos/angular2/angular.png'; 

}