更多

Question

我意识到“this”是指实例方法。

使用“this”调用变量和方法可以获得与没有“变量”相同的结果。

示例模板（sample.html）：

<p> {{ this.getName() }} </p>

示例组件（sample.component.ts）：

@Component({
  templateUrl: 'sample.html'
})

export class SampleComponent {

   public name: string;

   constructor() {
      this.name = 'John'; 
   }

   getName():string {
     return this.name;
   }
}

基于以上代码，

{{ this.getName() }}和{{ getName() }}都可以显示John。

我应该添加“this”以获得良好的编码风格吗？

或者没有这样做的担忧（例如，表现）？

Answer 1

我应该添加“this”以获得良好的编码风格吗？

this在角度模板中不常见。使用{{ getName() }}

更多

请参阅约定的官方教程：https://angular.io/tutorial/toh-pt1

Answer 2

Angular模板DSL中允许

this来引用组件实例。 {{ this.getName() }}和{{ getName() }}完全相同。

this应该用括号表示法指定属性名称。

动态：

{{ this[methodName]() }}

或静态地：

{{ this['foo bar'] }}

将this用于可以用点表示法指定的组件属性名称没有任何好处。

Answer 3

实际上有很多使用“this”，而不仅仅是为了良好的编码风格。正如您所提到的，“this”指的是实例方法。这意味着它用于引用变量和/或参数，以便系统知道变量/参数是否用于某一行代码（但对于此部分，这主要用于C＃/ Java）。 / p>

例如：

public class NewClass
{
   private string test;
    public string Test
    {
     get{return test;}
     set{test = value;}
    }
   //constructor with 1 parameter
   //which is also applied in angular but in different syntaxes
   //which you can see in Angular 5 which is made easier and cleaner
   public NewClass(string test) 
   {
        this.test = test;
   }
   public void SomeFunction(string test)
   {
     //the left side is the variable class test
     //while the right side is the parameter test
     this.test = test;
   }
}

在Angular中，我所指的构造函数是这样的：

export class someClassComponent{
    constructor(private router : Router){
    }
    someFunction(var router){
       //left side is the router from the constructor
       //right side is the parameter
       this.router = router;
    }
}

在组件模板中使用“this”调用变量或方法是一个好习惯吗？

3 个答案:

更多