使用bactic操作符创建的字符串中的angular2-字符串插值

Question

我正在学习angular2，并且遇到了一些新的东西。

我使用Chrome浏览器的ScratchJS扩展来学习TypeScript。虽然这样做，这是我做的bactic字符串（如果我可以这样说）

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

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

正如你所看到的，这是可变的用户如何在字符串中使用。但是当我在Angular2项目中做同样的事情时，它有点不同（做上面的事情会引发错误）。对于我的笨蛋Angular2项目，我做了一个简单的组件。

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() { 
    } 
} 

这是有效的。但在这里，我使用的的

${} 

如果我使用

{{}} 

代替串插，就会抛出一个错误。 我知道我了解一些错误的事实。但任何人都可以解释它是什么？

谢谢！

N.B：我使用的是最新版本Angular2和打字稿

Answer 1

{{ foo }}将通过Angular模板引擎进行处理，结合你的类中定义的FOO属性。

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

这与Angular如何工作密切相关，这与typescript或其他任何内容无关。如果您不在Angular项目中，或者不在模板中，仍然可以使用${}。

例如，这样的事情应该工作，因为表达式返回之前评估，并且不依赖模板引擎：

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