Angular 中的 `${}` 有什么用？ [复制]答案

【问题标题】：What is the use of `${}` in Angular? [duplicate]Angular 中的 `${}` 有什么用？ [复制]
【发布时间】：2018-02-26 23:43:18
【问题描述】：

我有时会在 Angular 项目的 TypeScript 组件文件的反引号中看到这种语法：

<div ${selector} [inDemo]="false" [config]="demoConfig">Demo Content</div>

谁能解释一下这个特定的属性${}？

它是如何工作的，我应该什么时候使用它？

【问题讨论】：

你确定不是#???
可能只是一个模板字符串：typescriptlang.org/docs/handbook/basic-types.html#string。多一点上下文会有所帮助。
这是一个 TypeScript 功能（字符串插值），因此仅适用于内联模板（template: '...', 但不适用于外部模板templateUrl: './my_component.html', ）
不是# (ElementRef) 而是${}。我认为这确实是一个 TypeScript 功能。我会更深入地研究它..
只是它的 es6 javascript 功能 :-)

【解决方案1】：

用于编写多行字符串：

`string text`

`string text line 1  
string text line 2`

`string text ${expression} string text`

tag`string text ${expression} string text`

【讨论】：

【解决方案2】：

称为模板文字，是ECMASCRIPT6（ECMASCRIPT2015）的一个特性

不使用它，您可以通过以下方式将字符串与一些变量连接起来：

var a = 10, b = 15;
var string = "a equals to " + a + " and b equals to " + b;

通过使用模板字面量，它会更简单：

var a = 10, b = 15;
var string = `a equals to ${a} and b equals to ${b}`;

【讨论】：