使用「this」關鍵字和沒有「this」關鍵字的角度數據插值綁定行爲？

下面的代碼是我的組件使用「this」關鍵字和沒有「this」關鍵字的角度數據插值綁定行爲？

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

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

}

在我知道，當我提到{{name}}數據將綁定的模板。但如果我將其更改爲{{this.name}}，它也可以工作。

有什麼區別嗎？哪個更好用？

來源

2017-06-21 Mr_Perfect

您可以使用'this'，但不應該。 – 2017-06-21 05:34:42

請解釋清楚。爲什麼我應該？爲什麼我不應該？ –

由於它沒有記錄，因此不可靠支持，並可能在未來的版本中打破，與AoT或Angular Universal等不兼容。 – 2017-06-21 06:08:19

看起來他們自從Angular 2 RC5開始在模板中使用this。我試着用Angular 2 Beta,Angular 2 Final和Angular 4，它在後兩者中工作。

下面是一些活生生的實例（this尚未添加默認情況下，這樣做，以便在模板）

Plunker Example using Angular 2 Beta < - 不工作
Plunker Example using Angular 2 Final < - 工作
Plunker Example using Angular 4 < - 工作

角模板可以訪問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 
    } 

}

來源

2017-06-21 05:36:24 anonym

很好的發現..！ – Meligy

我很確定，在一個Angular2（不是4）應用程序中，我們使用'{{this.prop}}'並且它可以工作。 – 2017-06-21 06:07:34

它可以在2.x.x http://plnkr.co/edit/o0FELF31nxHLtObOvNKW?p=preview中使用。你的運動員的例子是測試版 – yurzui

您無法在模板中訪問全局等。只有當前內容（`this）中的內容。

所以，即使作爲另一個答案說，Angular 4會讓你這樣做（請注意，他們並沒有對此產生任何影響），那麼最好使用的不包括this. 。

原因在於，顯而易見，this是您不會跳轉的隱式提供上下文。編寫this.可能暗示新開發者可以調用其他的東西，這是不正確的。

來源

2017-06-21 05:42:53 Meligy

我沒有明確地得到你 –

無論你是否寫它，你都隱式使用'this' 。你不能在全局範圍內調用任何東西，甚至不能調用相同的'.ts'文件甚至是靜態東西。因此，如果您開始在模板中編寫多餘的'this.'，下一個開發人員可能會認爲他們可以在模板中使用其他內容，因此可能會導致混淆。 – Meligy

使用「this」關鍵字和沒有「this」關鍵字的角度數據插值綁定行爲？

回答

相關問題