angular2- String-Interpolation in Saiten bactic Operator

Question

Ich lerne angular2 und ich kam in ein paar neue Dinge.

Ich habe ScratchJS Erweiterung des Chrome-Browsers verwendet, um TypeScript zu lernen. Während das zu tun, das ist, was ich für eine bactic String tat (wenn ich es so sagen kann)

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

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

Wie Sie sehen können, ist dies, wie die Variable Benutzer in der Zeichenfolge verwendet wird. Aber wenn ich dasselbe in einem Angular2-Projekt mache, ist es etwas anders (und Dinge wie oben zu tun, wird einen Fehler verursachen). Für mein dumy Angular2-Projekt habe ich eine einfache Komponente erstellt.

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

Das funktioniert. Aber hier bin ich mit String-Interpolation

{{}} 

statt

${} 

mit Und wenn ich, dass, wird es einen Fehler aus. Ich weiß, dass ich einige Fakten falsch verstanden habe. Aber kann jemand erklären, was ist das?

Danke!

N. B: Ich verwende neueste Version von Angular2 und Typoskript

Answer 1

{{ foo }} wird von der Template-Engine von Angular behandelt werden, die foo Eigenschaft Bindung in der Klasse definiert.

${ bar } wird von der Javascript string interpolation behandelt, die beim Rendern keine Ahnung davon haben, was die Eigenschaft bar Ihres Objekts ist.

Dies ist etwas, das eng verwandt ist, wie Angular arbeiten, das ist nicht typescript oder etwas anderes verwandt. Sie können immer noch ${} verwenden, wenn Sie nicht in Ihrem Angular Projekt sind, oder nicht in der Vorlage.

Zum Beispiel so etwas wie dies funktionieren soll, da der Ausdruck, bevor sie zurückgegeben ausgewertet wird, und ist nicht abhängig von der Template-Engine:

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