ไดเรกทีฟแบบกำหนดเองในแองกูลาร์

ไดเรกทีฟช่วยให้คุณขยายความสามารถของ HTML ได้ บทเรียนนี้จะแนะนำไดเรกทีฟแบบกำหนดเองและวิธีสร้างไดเรกทีฟของคุณเอง

ไดเรกทีฟคืออะไร

ไดเรกทีฟจะเปลี่ยนลักษณะที่ปรากฏหรือการทำงานขององค์ประกอบ DOM แองกูลาร์มีไดเรกทีฟในตัว เช่น *ngIf และ *ngFor

ประเภทของไดเรกทีฟ

• ไดเรกทีฟคอมโพเนนต์
• ไดเรกทีฟแอตทริบิวต์ - เปลี่ยนลักษณะที่ปรากฏหรือการทำงาน
• ไดเรกทีฟเชิงโครงสร้าง - เปลี่ยนเค้าโครง เช่น *ngIf

การสร้างไดเรกทีฟแอตทริบิวต์

สร้างไดเรกทีฟโดยใช้ Angular CLI:

ng generate directive highlight

ng generate directive highlight

การใช้ไดเรกทีฟ

ใช้ไดเรกทีฟเป็นแอตทริบิวต์ในเทมเพลตของคุณ:

<p appHighlight>Highlighted Text</p>

<p appHighlight>Highlighted Text</p>

ตรรกะของไดเรกทีฟ

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

constructor(private el: ElementRef) {
  this.el.nativeElement.style.backgroundColor = 'yellow';
}

ตัวตกแต่ง @HostListener

ใช้ @HostListener เพื่อตอบสนองต่อเหตุการณ์บนองค์ประกอบที่มีไดเรกทีฟของคุณ:

@HostListener('mouseenter') onMouseEnter() {
  this.highlight('blue');
}

@Input() ในไดเรกทีฟ

@Input() ช่วยให้คุณส่งข้อมูลเข้าไปยังไดเรกทีฟจากเทมเพลตได้:

@Input() defaultColor: string;

สรุป

คุณได้เรียนรู้วิธีสร้างและใช้ไดเรกทีฟแบบกำหนดเองเพื่อเพิ่มความสามารถให้แอปแองกูลาร์แล้ว ทำได้ดีมาก