ค้นหาเว็บไซต์

angular - การเรียกตัวแปรหรือเมธอดด้วย "this" ภายในเทมเพลตของคอมโพเนนต์เป็นแนวทางปฏิบัติที่ดีหรือไม่?


ฉันตระหนักว่า "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" เพื่อให้โค้ดมีสไตล์ที่ดีไหม?

หรือมีข้อกังวลอะไรที่ไม่ควรทำหรือไม่ (เช่น ประสิทธิภาพ)?

คำตอบ #1

ฉันควรเพิ่ม "this" เพื่อให้โค้ดมีสไตล์ที่ดีไหม?

this ไม่ใช่สิ่งที่นิยมใช้ในเทมเพลตของ Angular ใช้ {{ getName() }} แทน

เพิ่มเติม

ดูคู่มืออย่างเป็นทางการสำหรับข้อตกลง: https://angular.io/tutorial/toh-pt1

คำตอบ #2

this เป็นสิ่งที่อนุญาตใน Angular template DSL เพื่ออ้างอิงถึงอินสแตนซ์ของคอมโพเนนต์ {{ this.getName() }} และ {{ getName() }} เหมือนกัน

this ถูกกำหนดให้ระบุชื่อคุณสมบัติด้วยสัญลักษณ์วงเล็บ

แบบไดนามิก:

{{ this[methodName]() }}

หรือแบบคงที่:

{{ this['foo bar'] }}

การใช้ this สำหรับชื่อคุณสมบัติของคอมโพเนนต์ที่สามารถระบุด้วยเครื่องหมายจุดไม่มีประโยชน์