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＆lt; - 不工作
Plunker Example using Angular 2 Final＆lt; - 工作
Plunker Example using Angular 4 ＆lt; - 工作

角度模板可以访问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会让你这样做（请注意，他们没有对此做任何声音），最好使用的那个不是包括this.。

原因很明显，this是你不会跳过的隐含提供的上下文。写this.可能暗示新的开发人员可以调用其他东西，但事实并非如此。

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

2 个答案: