Разница между интерполяцией и привязкой к свойствам

У меня есть компонент, который определяет свойство imageUrl и в моем шаблоне я использую это свойство для установки URL- imageUrl изображения. Я пробовал это, используя интерполяцию и используя привязку свойств, оба работают, но я не могу найти различий между ними или когда использовать один над другим. Кто-нибудь знает разницу?

<img [src]='imageUrl' >

<img src= {{ imageUrl }} >

Ответ 1

Angular оценивает все выражения в двойных фигурных скобках, преобразует результаты выражения в строки и объединяет их с соседними литеральными строками. Наконец, он присваивает этот составной интерполированный результат элементу или свойству/компоненту. - от https://angular.io/docs/ts/latest/guide/template-syntax.html#!#interpolation

Связывание свойств не преобразует результат выражения в строку.

Поэтому, если вам нужно связать что-то другое, кроме строки, с вашим свойством directive/component, вы должны использовать привязку свойств.

Ответ 2

Интерполяция использует {{выражение}} для отображения связанного значения с шаблоном компонентов. Интерполяция - это особый синтаксис, который Angular преобразует в привязку свойства

Связывание свойств использует [] для отправки значений из компонента в шаблон. Связывание свойств: чтобы установить свойство элемента в значение, отличное от строки, вы должны использовать привязку свойств

Пример:

мы отключаем кнопку, связывая с Boolean свойство isDisabled.

<button [disabled]='isDisabled'>Try Me</button>

интерполяция вместо привязки к свойствам, кнопка всегда будет отключена независимо от значения свойства класса isDisabled.

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

каноническая форма, которая является альтернативным синтаксисом квадратной скобки.

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