如何使用 es6 模板文字作为 Angular 组件输入

Question

在我的 Angular 4 应用程序中，我有一个接受字符串输入的组件：

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

在某些情况下我需要在字符串中传递一个变量，例如：

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

如果我可以使用 es6 template literals（又名 模板字符串 或 back-tick 字符串）就好了：

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

但它不起作用：

Uncaught Error: Template parse errors: Parser Error: Unexpected token Lexer Error: Unexpected character [`] at column 1 in expression

完成它的正确方法是什么？

Answer 1

ES6 Template literals (Template strings) cannot be used inside an Angular component input, because the Angular compiler 不懂这个语法。

你提供的方式很好

<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 = 'Dinindu';
  this.input = `My name is ${this.name}!`;
}

在HTML,

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

也可以这样使用。它真的很接近模板文字，

<app-my-component myInput="My name is {{name}}"></app-my-component>

Answer 2

您仍然可以在属性值中使用 angular 的插值语法：

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

这取决于你喜欢写什么，但不幸的是绑定表达式中不允许反引号。

Answer 3

只要模板存在于 TS 源而不是 HTML 中，就可以使用模板文字表达式。所以下面不工作

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

但下面的方法会起作用

let displayString: String = 'I work in a string literal - ';

@Component({
  selector: 'app-product-alerts',
  template: `
    ${displayString} Tada !!
  `,
  styleUrls: ['./product-alerts.component.css']
})

如果您想探索实时代码，这里有一个示例： https://stackblitz.com/edit/angular-qpxkbd-urdema?file=src%2Fapp%2Fproduct-alerts%2Fproduct-alerts.component.ts

如何使用 es6 模板文字作为 Angular 组件输入

How to use es6 template literal as Angular Component Input

javascript

angular

typescript

ecmascript-6

template-literals