ทำความเข้าใจคอมโพเนนต์ของแองกูลาร์

คอมโพเนนต์เป็นส่วนประกอบพื้นฐานของแอปพลิเคชันแองกูลาร์ ในบทเรียนนี้ คุณจะได้เรียนรู้เกี่ยวกับคอมโพเนนต์และวงจรชีวิตของคอมโพเนนต์

คอมโพเนนต์คืออะไร

คอมโพเนนต์คือส่วนหนึ่งของส่วนติดต่อผู้ใช้ที่ประกอบด้วยโค้ด HTML, CSS และ TypeScript คอมโพเนนต์แสดงถึงส่วนหนึ่งของส่วนติดต่อผู้ใช้ของแอปพลิเคชัน

การสร้างคอมโพเนนต์

ใช้ Angular CLI เพื่อสร้างคอมโพเนนต์ได้อย่างง่ายดาย:

ng generate component my-component

ng generate component my-component

โครงสร้างคอมโพเนนต์

โดยทั่วไป คอมโพเนนต์แองกูลาร์จะมีไฟล์หลักสี่ไฟล์:

• .html: เทมเพลต
• .ts: ตรรกะการทำงาน
• .css: รูปแบบการแสดงผล
• .spec.ts: การทดสอบ

ตัวตกแต่งคอมโพเนนต์

ตัวตกแต่ง @Component เชื่อมโยงคลาสคอมโพเนนต์ของคุณเข้ากับเทมเพลตและรูปแบบการแสดงผล

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.html',
  styleUrls: ['./my-component.css']
})

ฮุกวงจรชีวิต

คอมโพเนนต์แองกูลาร์มีฮุกวงจรชีวิตที่ช่วยให้คุณเรียกใช้โค้ดในช่วงเวลาที่กำหนด ฮุกที่ใช้กันทั่วไป ได้แก่ ngOnInit() และ ngOnDestroy()

การใช้ ngOnInit()

ngOnInit() จะทำงานหลังจากแองกูลาร์เริ่มต้นข้อมูลของคอมโพเนนต์แล้ว จึงเหมาะอย่างยิ่งสำหรับการตั้งค่าเริ่มต้น:

ngOnInit() {
  console.log('Component initialized!');
}

การแสดงคอมโพเนนต์

ใช้ตัวเลือกของคอมโพเนนต์ในเทมเพลตอื่นเพื่อแสดงคอมโพเนนต์นั้น:

<app-my-component></app-my-component>

สรุป

คุณได้เรียนรู้เกี่ยวกับคอมโพเนนต์ วิธีสร้างคอมโพเนนต์ และฮุกวงจรชีวิตแล้ว ทำได้ดีมาก