Angular เรียกใช้ Component ใน Template

บทความนี้สอนวิธีเรียกใช้ component ใน template ของ component อื่น ใน Angular สมมติคุณมี component อันหนึ่งแสดงผลบางอย่าง และต้องการนำ component นี้ไปแสดงใน template ของ component อื่น จะทำอย่างไร มาดูวิธีกัน

 

ตัวอย่าง Angular เรียกใช้ Component ใน Template

1. สร้าง component ใหม่ ตัวอย่างนี้ตั้งชื่อว่า about

ng g c about

 

2. เปิดไฟล์ app.module.ts อยู่ใน /src/app/ และเพิ่มการ import component และกำหนดใน declarations

import { AboutComponent } from './about/about.component';

@NgModule({
  declarations: [
    AppComponent,
    AboutComponent
  ],
  ...

 

3. ทดลองเรียก AboutComponent ใน template ของ component อื่น โดยการเปิดไฟล์ app.component.html ใน /src/app/ และเพิ่มโค้ดดังนี้

<app-about></app-about>
<router-outlet></router-outlet>

จากโค้ดกรณีต้องการเรียกใช้ component ในหน้า template ให้เพิ่มคำนำหน้า “app-” และค่อยตามด้วยชื่อ component ที่สร้าง

 

4. รันโปรเจค Angular และเรียก URL http://localhost:4200/ หากสำเร็จจะพบข้อความ “about works!” ในหน้า template ของ component app

 

สรุป Angular เรียกใช้ component ใน template นั้นเมื่อสร้าง component แล้ว ให้ import component และกำหนดใน declarations จากนั้นเวลาเรียกใช้ใน template ให้เพิ่มคำว่า “app-” ก่อนชื่อ component ที่สร้างขึ้น