使用“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”关键字的角度数据插值绑定行为？

回答

相关问题