การสร้างคอมโพเนนต์แบบสแตนด์อโลน
ประกาศคอมโพเนนต์ด้วยแฟล็ก standalone
การสร้างคอมโพเนนต์แบบสแตนด์อโลน เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
การสร้าง Standalone Component
Standalone component คือคลาสที่ตกแต่งด้วย @Component และกำหนดให้เป็น standalone ใน Angular v19 ขึ้นไป นี่คือค่าเริ่มต้น ดังนั้นโดยมากคุณไม่จำเป็นต้องเขียนแฟล็กนี้ด้วยซ้ำ
แฟล็ก standalone
ในอดีต คุณต้องกำหนด standalone: true ในตัวตกแต่ง แต่ใน v19 และรุ่นถัดไป คอมโพเนนต์จะเป็น standalone โดยค่าเริ่มต้น จึงไม่จำเป็นต้องระบุแฟล็กนี้
import { Component } from '@angular/core';
@Component({
selector: 'app-greeting',
standalone: true, // optional in v19+
template: '<h1>Welcome</h1>'
})
export class GreetingComponent {}ตัวเลือก
selector คือแท็กองค์ประกอบแบบกำหนดเองที่ใช้วางคอมโพเนนต์ในเทมเพลต เช่น app-greeting
// usage in another template:
// <app-greeting></app-greeting>เทมเพลตแบบฝังในโค้ด
ใช้คุณสมบัติ template สำหรับ HTML ที่เขียนไว้ภายในโค้ด เหมาะสำหรับคอมโพเนนต์ขนาดเล็ก
@Component({
selector: 'app-badge',
template: '<span class="badge">New</span>'
})
export class BadgeComponent {}เทมเพลตภายนอก
สำหรับมุมมองขนาดใหญ่ ให้ใช้ templateUrl เพื่อระบุไปยังไฟล์ HTML
@Component({
selector: 'app-profile',
templateUrl: './profile.component.html'
})
export class ProfileComponent {}สไตล์
เพิ่มสไตล์ที่มีขอบเขตเฉพาะคอมโพเนนต์ด้วย styles (แบบฝังในโค้ด) หรือ styleUrl / styleUrls (ไฟล์ภายนอก)
@Component({
selector: 'app-card',
template: '<div class="card"></div>',
styles: ['.card { padding: 16px; }']
})
export class CardComponent {}ตรรกะในคลาสของคอมโพเนนต์
เนื้อหาของคลาสใช้เก็บสถานะและพฤติกรรม เมื่อใช้ Signals ให้ประกาศสถานะที่ตอบสนองต่อการเปลี่ยนแปลงเป็นฟิลด์
import { Component, signal } from '@angular/core';
@Component({ selector: 'app-counter', template: '<p>{{ n() }}</p>' })
export class CounterComponent {
n = signal(0);
}ไม่ต้องใช้โมดูล
สังเกตว่าไม่มี @NgModule และไม่มีอาร์เรย์ declarations คอมโพเนนต์พร้อมให้นำเข้าได้ทุกที่ที่จำเป็น
หลักการตั้งชื่อไฟล์
ตามหลักการของ Angular ไฟล์จะมีชื่ออย่าง greeting.component.ts คลาสชื่อ GreetingComponent และตัวเลือกชื่อ app-greeting
การใช้คอมโพเนนต์หนึ่งภายในอีกคอมโพเนนต์
หากต้องการใช้คอมโพเนนต์ลูกแบบ standalone ให้นำเข้าคอมโพเนนต์นั้นในอาร์เรย์ imports ของคอมโพเนนต์แม่ (จะกล่าวถึงในบทเรียนถัดไป) แล้ววางตัวเลือกของคอมโพเนนต์ลูกไว้ในเทมเพลตของคอมโพเนนต์แม่
การสร้างด้วย CLI
Angular CLI จะสร้าง standalone components เป็นค่าเริ่มต้น การเรียกใช้ ng generate component greeting จะสร้างโครงร่างของ GreetingComponent แบบ standalone ให้คุณ
ตรวจสอบสั้น ๆ: การสร้างคอมโพเนนต์
เกี่ยวกับค่าเริ่มต้นของ standalone
สรุป: การสร้าง Standalone
คุณสร้าง standalone component ด้วย @Component และอาจกำหนด standalone: true ได้ (ซึ่งเป็นค่าเริ่มต้นใน v19 ขึ้นไป) จากนั้นกำหนดตัวเลือก เทมเพลตหรือ templateUrl สไตล์ที่ไม่บังคับ และตรรกะของคลาส ไม่จำเป็นต้องใช้ NgModule ต่อไป: การนำเข้าสิ่งที่ต้องใช้โดยตรง
คำถามที่พบบ่อย
บทเรียน “การสร้างคอมโพเนนต์แบบสแตนด์อโลน” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การสร้างคอมโพเนนต์แบบสแตนด์อโลน” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การสร้างคอมโพเนนต์แบบสแตนด์อโลน”
ประกาศคอมโพเนนต์ด้วยแฟล็ก standalone คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “การสร้างคอมโพเนนต์แบบสแตนด์อโลน” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม
ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- เหตุผลที่ใช้คอมโพเนนต์แบบสแตนด์อโลน
- การสร้างคอมโพเนนต์แบบสแตนด์อโลน
- การนำเข้าดีเพนเดนซีโดยตรง
- การเริ่มต้นแอปแบบสแตนด์อโลน