"this"キーワードを使用し、角度の "this"キーワードを使用しないデータ補間バインディング動作？コードの下

Question

は私が{{name}}を言及するとき、データが結合することを知っているテンプレートには、私のコンポーネント

@Component({ 
    selector: 'my-app', 
    template: '<div>{{name}}</div>' 
}) 

export class MyApp { 
    name: String = ''; 
    constructor(){ 
     this.name = 'Mr_Perfect'; 
    } 

} 

です。しかし、もしそれを{{this.name}}に変更すれば、それは働いています。

違いがありますか？どちらを使うのが良いですか？

Answer 1

角2 RC5以来、テンプレートにthisの使用を有効にしたようです。私はAngular 2 BetaとAngular 2 FinalとAngular 4でこれを試して、後者の2つで動作します。ここで

は（、 thisがデフォルトで追加されていないテンプレートのようにそれを行う）、いくつかのライブの例です

Plunker Example using Angular 2 Beta < - ワーキング
Plunker Example using Angular 4 < - - ワーキング

Plunker Example using Angular 2 Final <を動作しません角度テンプレートは、Component Classのローカルのすべての変数にアクセスできます。これは、クラス内の変数にアクセスするためにthisを入れなければならない関数内とは異なり、テンプレート内ではなく、2.xと4.xで必要に応じて行うことができます。

@Component({ 
    selector: 'my-app', 
    template: `<div>{{name}}</div>  <!-- Angular 2 & Angular 4 --> 
       <div>{{this.name}}</div> <!-- Angular 4 Only -->` 
}) 

export class MyApp { 
    name: string = ''; 
    constructor(){ 
     this.name = 'Mr_Perfect'; 
     //^required 
    } 

    get(name: string) 
    { 
     return this.name; 
      //^required 
    } 

} 

Answer 2

テンプレート内のグローバルなどはアクセスできません。現在のコンテンツに含まれるもののみ（ `this）。

別の答えとして、角4はあなたにそれをさせてくれると言っていましたが、使用する方が良いと思われるものはthis. 。

なぜなら、thisはあなたがジャンプしない暗黙の提供されたコンテキストであることが明らかです。 this.を書くと、新しい開発者には、他のものを呼び出すことができるかもしれませんが、これは真実ではありません。