Unterschied zwischen Interpolation und Eigenschaft Bindung

Question

Ich habe eine Komponente, die eine imageUrl-Eigenschaft definiert und in meiner Vorlage verwende ich diese Eigenschaft, um die URL eines Bildes festzulegen. Ich versuchte dies mit Interpolation und Verwendung der Eigenschaft Bindung, beide arbeiten, aber ich kann keine Unterschiede zwischen den beiden finden, oder wenn Sie die eine über die andere verwenden. Kennt jemand den Unterschied?

<img [src]='imageUrl' > 

<img src= {{ imageUrl }} > 

Answer 1

Angular wertet alle Ausdrücke in doppelten geschweiften Klammern, die Expressionsergebnisse in Strings konvertiert und verkettet sie mit den benachbarten Literalzeichenfolgen. Schließlich weist es dieses zusammengesetzte interpolierte Ergebnis einer Element- oder Direktiven/Komponenteneigenschaft zu. - von https://angular.io/docs/ts/latest/guide/template-syntax.html#!#interpolation

Die Eigenschaftenbindung konvertiert das Ausdrucksergebnis nicht in eine Zeichenfolge.

Wenn Sie also etwas anderes als eine Zeichenfolge an Ihre Direktive/Komponenteneigenschaft binden müssen, müssen Sie die Eigenschaftsbindung verwenden.

Answer 2

Interpolation verwendet die {{Expression}}, um den gebundenen Wert an die Vorlage der Komponente zu rendern. Interpolation ist eine spezielle Syntax, die Angular in eine Eigenschaftsbindung konvertiert

Eigenschaftsbindung Benutzer [], um Werte von der Komponente an die Vorlage zu senden. Property Bindung: ein Element Eigenschaft auf einen Nicht-String-Datenwert zu setzen, müssen Sie Eigenschaft Bindung

Beispiel:

wir einen Knopf durch Bindung an die Boolesche Eigenschaft isDisabled deaktivieren.

Interpolation anstelle der Eigenschaft Bindung, die Schaltfläche wird immer deaktiviert, unabhängig von isDisabled Klasseneigenschaft Wert ist wahr von false.

<button disabled='{{isDisabled}}'>Try Me</button> 

kanonische Form, die eine alternative Syntax zu eckigen Klammer ist. `Src =" http:

<button bind-disabled='isDisabled'>Try Me</button>