angular – 使用反引号运算符进行的字符串插值

前端之家收集整理的这篇文章主要介绍了angular – 使用反引号运算符进行的字符串插值前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在学习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() { 
  }
}

这有效.但在这里,我正在使用字符串插值:

{{}}

代替:

${}

如果我使用它,它将引发错误.我知道我理解了一些错误的事实.但有谁可以解释它是什么?

解决方法

{{foo}}将由Angular的模板引擎处理,绑定您的类中定义的foo属性.

${bar}将由Javascript字符串插值处理,在渲染时,它不知道对象的属性栏是什么.

这与Angular如何工作密切相关,这与打字稿或其他任何东西无关.如果您不在Angular项目中,或者不在模板中,您仍然可以使用${}.

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

public getUsername(): string {
    let username = 'test';
    return `Hi ${username}`;
}

猜你在找的Angularjs相关文章