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
