เวลาเราไล่ Code ในโปรเจกต์ Angular ที่ซับซ้อน แล้วเจอ Custom Tag อย่าง <DataTables> การจะหาว่า “ตกลงตัวนี้มันประกาศไว้ที่ไหน?” หรือ “Logic การเรนเดอร์อยู่ที่ไฟล์อะไร?” ไม่ใช่เรื่องยากครับ นี่คือขั้นตอนการสืบหาแบบ Step-by-step ที่จะช่วยให้คุณเจอต้นตอได้ในไม่กี่วินาที
ใช้ Search Tool ใน VS Code ( วิธีที่เร็วที่สุด )
วิธีที่ง่ายและตรงไปตรงมาที่สุดคือการหา Selector ที่ชื่อว่า DataTables
- กด
Ctrl + Shift + F( Windows ) หรือCmd + Shift + F( Mac ) - พิมพ์ข้อความ:
selector: 'DataTables'หรือเฉพาะคำว่าDataTables - เป้าหมาย: มองหาไฟล์
.tsที่มี Decorator@Componentซึ่งจะมีหน้าตาประมาณนี้
@Component({
selector: 'DataTables', // <--- ตัวนี้แหละคือชื่อ Tag ที่เราใช้ใน HTML
templateUrl: './data-tables.component.html',
styleUrls: ['./data-tables.component.css']
})
ใช้ Angular DevTools ( วิธีสืบจากหน้าเว็บ )
ากแอปพลิเคชันกำลังรันอยู่ คุณสามารถใช้ Extension Angular DevTools ( มีทั้งใน Chrome และ Edge ) เพื่อดูโครงสร้าง Component ได้ทันที
- เปิด Inspect Element ( F12 ) บนเบราว์เซอร์
- ไปที่แถบ Angular
- เลือกเมนู Component Tree
- ใช้เครื่องมือ Inspect ( รูปลูกศร ) คลิกไปที่ Element
<ในหน้าเว็บDataTables> - DevTools จะไฮไลต์ Component ที่รับผิดชอบ Tag นั้น พร้อมบอกชื่อคลาส ( Class Name ) และไฟล์ที่เกี่ยวข้องด้านขวามือ
สืบจาก Module ( กรณีใช้ Library ภายนอก )
ถ้าคุณหาในโปรเจกต์แล้วไม่เจอไฟล์ที่เขียนว่า selector: ' เป็นไปได้ว่ามันมาจาก Library ภายนอก ( เช่น PrimeNG, Material หรือ Shared Module )DataTables'
- ไปที่ไฟล์
.tsของ Component ที่คุณพบ Tag<DataTables> - ดูว่าไฟล์นั้นสังกัด Module ไหน ( ดูที่ไฟล์
xxx.module.tsในโฟลเดอร์เดียวกัน ) - ในไฟล์ Module นั้น ให้เช็กในส่วนของ
imports: [ ... ] - มองหา Module ที่ดูเกี่ยวข้อง เช่น
TableModuleหรือSharedModuleแล้วลองกดF12เข้าไปดูข้างในว่ามีการexportComponent ตัวไหนออกมาบ้าง
การใช้ “Go to Definition”
ใน VS Code หากคุณติดตั้ง Extension Angular Language Service ไว้
- ให้เปิดไฟล์ HTML ที่มี Tag
<DataTables> - กดปุ่ม
Ctrl( หรือCmd) ค้างไว้แล้วคลิกที่ตัวอักษร<DataTables - Editor จะพาคุณวาร์ปไปยังไฟล์
.tsของ Component นั้นโดยอัตโนมัติ
อ่านเพิ่มเติม