Как использовать литерал шаблона es6 как Angular Ввод компонента

В моем приложении Angular 4 у меня есть компонент, который принимает строковый ввод:

<app-my-component [myInput]="'some string value'"></app-my-component>

В некоторых случаях мне нужно передать переменную внутри строки, например:

<app-my-component [myInput]="'My name is ' + name + '!'"></app-my-component>

было бы неплохо, если бы я мог использовать шаблонные литералы es6 (так называемые строки шаблона или обратные галочки):

<app-my-component [myInput]="'My name is ${name}!'"></app-my-component>

но это не работает:

Неопознанная ошибка: ошибки синтаксического анализа шаблона: ошибка синтаксического анализатора: неожиданная ошибка лексера токена: неожиданный символ ['] в столбце 1 в выражении

Как правильно это сделать?

Ответ 1

Шаблонные литералы ES6 (строки шаблона) нельзя использовать внутри ввода компонента Angular, поскольку angular компилятор не знает этой грамматики.

Этот способ, который вы предоставили, подойдет.

<app-my-component [myInput]="'My name is ' + name + '!'"></app-my-component>

Или что-то вроде этого,

В компоненте

// In the component, you can use ES6 template literal
name: string;
input: string;

ngOnInit() {
  this.name = 'some name;
  this.input = 'My name is ${this.name}!';
}

В HTML,

<app-my-component [myInput]="input"></app-my-component>

Ответ 2

Вы все еще можете использовать синтаксис интерполяции angular в значениях атрибута:

myInput="My name is {{ name }}!"

Это зависит от вас, который вы предпочитаете писать, но, к сожалению, обратные ссылки не допускаются в привязке выражений.