ป้ายกำกับ: Shared

เวลาเราไล่ Code ในโปรเจกต์ Angular ที่ซับซ้อน แล้วเจอ Custom Tag อย่าง <DataTables> การจะหาว่า “ตกลงตัวนี้มันประกาศไว้ที่ไหน?” หรือ “Logic การเรนเดอร์อยู่ที่ไฟล์อะไร?” ไม่ใช่เรื่องยากครับ นี่คือขั้นตอนการสืบหาแบบ Step-by-step ที่จะช่วยให้คุณเจอต้นตอได้ในไม่กี่วินาที

ใช้ Search Tool ใน VS Code

วิธีที่ง่ายและตรงไปตรงมาที่สุดคือการหา Selector ที่ชื่อว่า DataTables

1. กด Ctrl + Shift + F หรือ Cmd + Shift + F
2. พิมพ์ข้อความ: selector: 'DataTables' หรือเฉพาะคำว่า DataTables
3. เป้าหมาย: มองหาไฟล์ .ts ที่มี Decorator @Component ซึ่งจะมีหน้าตาประมาณนี้

@Component ({ selector: 'DataTables', // <--- ตัวนี้แหละคือชื่อ Tag ที่เราใช้ใน HTML templateUrl: './data-tables.component.html', styleUrls: ['./data-tables.component.css']
}) 

ใช้ Angular DevTools

ากแอปพลิเคชันกำลังรันอยู่ คุณสามารถใช้ Extension Angular DevTools เพื่อดูโครงสร้าง Component ได้ทันที

1. เปิด Inspect Element บนเบราว์เซอร์
2. ไปที่แถบ Angular
3. เลือกเมนู Component Tree
4. ใช้เครื่องมือ Inspect คลิกไปที่ Element <DataTables> ในหน้าเว็บ
5. DevTools จะไฮไลต์ Component ที่รับผิดชอบ Tag นั้น พร้อมบอกชื่อคลาส และไฟล์ที่เกี่ยวข้องด้านขวามือ

สืบจาก Module

ถ้าคุณหาในโปรเจกต์แล้วไม่เจอไฟล์ที่เขียนว่า selector: 'DataTables' เป็นไปได้ว่ามันมาจาก Library ภายนอก

1. ไปที่ไฟล์ .ts ของ Component ที่คุณพบ Tag <DataTables>
2. ดูว่าไฟล์นั้นสังกัด Module ไหน
3. ในไฟล์ Module นั้น ให้เช็กในส่วนของ imports: [ ... ]
4. มองหา Module ที่ดูเกี่ยวข้อง เช่น TableModule หรือ SharedModule แล้วลองกด F12 เข้าไปดูข้างในว่ามีการ export Component ตัวไหนออกมาบ้าง

การใช้ “Go to Definition”

ใน VS Code หากคุณติดตั้ง Extension Angular Language Service ไว้

1. ให้เปิดไฟล์ HTML ที่มี Tag <DataTables>
2. กดปุ่ม Ctrl ค้างไว้แล้วคลิกที่ตัวอักษร <DataTables
3. Editor จะพาคุณวาร์ปไปยังไฟล์ .ts ของ Component นั้นโดยอัตโนมัติ

อ่านเพิ่มเติม

• Laravel: DataTables & Eloquent
• Laravel: Tailwind CSS, Vite
• MVC และลูก ๆ
• XSLT