角度中带有“this”关键字和没有“this”关键字的数据插值绑定行为？

Question

下面的代码是我的组件

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

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

}

在模板中我知道当我提到{{name}}时数据会绑定。但如果我将其更改为{{this.name}}，它也可以工作。

有什么不同吗？哪个更好用？

Answer 1

自 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
    }

}

Answer 2

您无法访问模板中的任何全局等内容。仅包含当前内容中的内容 (`this)。

所以，我想说，即使另一个答案说 Angular 4 会让你这样做（请注意，他们没有对此发出任何声音），但最好不要包含 @987654321 @。

原因是很明显this 是您不会跳过的隐式提供的上下文。写 this. 可能会暗示新开发人员您可以调用其他东西，这是不正确的。