Angular2：テンプレート文字列の$ {..}と{{...}}の相違点

Question

ES6には、テンプレート文字列機能があります（バックティックを使用してこのように/ concat文字列を使用できます）

var name = 'John'; 
 
var intro = `My name is ${name}`;

と角2コンポーネントテンプレートでは、我々は変数から値を挿入するために使用することができます補間の二重中括弧を持っています。

@Component({ 
    selector: 'selector-test-tag', 
    template: ` 
    <div> 
    <p>My name is ${name}</p> 
    <p>My name is {{name}}</p> 
    </div> 
    ` 
}) 
export class Test { 
    name: string; 
} 

質問：もう1つを選択する理由はありますか？

Answer 1

彼らは異なるものです：あなたが既に知っているよう

${}は、テンプレート文字列にプレースホルダとして使用されています。これらのテンプレート文字列は、Angularのテンプレートと同じではないため、Angular 2テンプレートで${}を使用しないでください。初心者の方は、テンプレートを外部ファイルに移動しても機能しません。

{{}}は、Angularの補間構文であり、Angular 2テンプレートで使用したいものです。コンポーネントクラス内でプロパティまたはメソッドを定義し、コンポーネントのテンプレート内で{{}}を使用して、そのプロパティの値を補間するか、またはメソッドを呼び出すことができます。式（{{a + b/2}}）とパイプ（{{title | uppercase}}）を使用することもできます。

資源のカップル：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

https://angular.io/docs/ts/latest/guide/template-syntax.html#!#interpolation

幸運！

Answer 2

角度式{{ }}は、angleが自動的にプロパティの変更を監視し、実行時に変更されたときにプロパティの値を動的に変更することができますが、ES6 Templateメソッドは値を解析します最初のレンダリング時に1回。