Angular2: разница между ${..} и {{...}} в строке шаблона

В ES6 есть функция Template String, то есть мы можем сформировать/конкатрировать строку следующим образом (с обратным тэгом) 

const name = 'John';
const intro = 'My name is ${name}';

console.log(intro);

Ответы

Ответ 1

Это разные вещи:

${} используются как заполнители в строке шаблона, как вы уже знаете. Эти строки шаблонов не совпадают с шаблонами Angular, и вы не должны использовать ${} в своих шаблонах Angular 2. Во-первых, это не сработает, если вы переместите шаблон во внешний файл.

{{}} - это синтаксис интерполяции Angular, и это то, что вы хотите использовать в Angular 2 шаблонах. Вы определяете свойство или метод в классе компонентов и используете {{}} в шаблоне компонента для интерполяции значения этого свойства или вызова метода. Вы также можете использовать выражения ({{a + b / 2}}) и трубы ({{title | uppercase}}).

Несколько ресурсов:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

https://angular.io/docs/ts/latest/guide/template-syntax.html#!#interpolation

Удачи!

Ответ 2

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