Question

我正在学习Angular 2，我遇到了一些新事物。我使用ScratchJS扩展的Chrome浏览器来学习TypeScript。这样做，这就是我为反引号（`）字符串所做的：

let user='user';
let msg=`Welcome ${user}! 
I can write multi-line string.

This is awesome!
`;
console.log(msg);

如您所见，这是变量用户在字符串中的使用方式。但是当我在Angular 2项目中做同样的事情时，它有点不同（做上面的事情会引发错误）。对于我的虚拟Angular 2项目，我做了一个简单的组件：

import { Component} from '@angular/core';

@Component({
  selector: 'app-user',
  template: `

      Hi,  {{user}}

      I can write multi-line string.

      This is awesome!
  `,
  styles: []
})
export class UserComponent {

  user:string='John Doe';
  constructor() { 
  }
}

这很有效。但在这里，我使用字符串插值：

{{}}

而不是：

${}

如果我使用它，它将引发错误。我知道我理解了一些错误的事实。但任何人都可以解释它是什么吗？

Answer 1

{{ foo }}将由Angular的模板引擎处理，绑定您班级中定义的foo属性。

${ bar }将由Javascript string interpolation处理，bar在渲染时，不知道对象的属性Angular是什么。

这与typescript的工作方式密切相关，与${}或其他任何内容无关。如果您不在Angular项目中，或者不在模板中，则仍然可以使用public getUsername(): string { let username = 'test'; return `Hi ${username}`; }。

例如，这样的东西应该可以工作，因为表达式在返回之前被计算，并且不依赖于模板引擎：

getActivity().setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);

Answer 2

${}是一个字符串内插，用于显示打字稿代码之间的字符串值。 {{}}是插值，用于以HTML模板显示内容。

使用反引号运算符

2 个答案: