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

发布时间：2020-12-17 06:53:51 所属栏目：安全来源：网络整理

导读：我正在学习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,我遇到了一些新事物.我使用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}`;
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!