0Pricing
Angular Academy · บทเรียน

สไตล์ที่จำกัดขอบเขตอยู่ในคอมโพเนนต์

จำกัดสไตล์ให้ใช้เฉพาะภายในคอมโพเนนต์

สไตล์ที่จำกัดขอบเขตอยู่ในคอมโพเนนต์ เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน

สไตล์เป็นส่วนหนึ่งของคอมโพเนนต์

Angular อนุญาตให้แต่ละคอมโพเนนต์มี CSS ของตัวเอง โดยค่าเริ่มต้น สไตล์เหล่านี้จะถูกจำกัดขอบเขต หมายความว่าจะมีผลเฉพาะกับแม่แบบของคอมโพเนนต์นั้น ไม่ส่งผลต่อส่วนอื่นของหน้า

อาร์เรย์สไตล์แบบฝังในโค้ด

คุณสามารถกำหนดสไตล์ไว้ในโค้ดโดยตรงภายในตัวตกแต่ง @Component ด้วยอาร์เรย์ styles

@Component({
  selector: "app-card",
  template: "<div class='card'>Hello</div>",
  styles: [".card { padding: 16px; border: 1px solid #ccc; }"]
})
export class CardComponent {}

styleUrls ภายนอก

โดยทั่วไปแล้ว ให้ระบุไฟล์สไตล์ชีตภายนอกอย่างน้อยหนึ่งไฟล์ด้วย styleUrls

@Component({
  selector: "app-card",
  templateUrl: "./card.component.html",
  styleUrls: ["./card.component.css"]
})
export class CardComponent {}

รูปย่อของ styleUrl

สำหรับสไตล์ชีตเพียงไฟล์เดียว Angular รุ่นใหม่รองรับคุณสมบัติเอกพจน์ styleUrl

@Component({
  selector: "app-card",
  templateUrl: "./card.component.html",
  styleUrl: "./card.component.css"
})
export class CardComponent {}

การจำกัดขอบเขตในการทำงาน

กฎ .card ในคอมโพเนนต์หนึ่งจะไม่รั่วไหลไปยังคอมโพเนนต์อื่นที่ใช้คลาส card เช่นกัน แต่ละคอมโพเนนต์จะแยกออกจากกัน

/* card.component.css */
.card { color: navy; }
/* this navy color stays inside CardComponent only */

การจำกัดขอบเขตทำงานอย่างไร

Angular จะเพิ่มแอตทริบิวต์ที่ไม่ซ้ำกันให้กับองค์ประกอบของคอมโพเนนต์ และเขียนตัวเลือก CSS ใหม่ให้ตรงกับแอตทริบิวต์เหล่านั้น เพื่อให้สไตล์มีผลเฉพาะภายในคอมโพเนนต์นั้น

<!-- generated markup -->
<div class="card" _ngcontent-abc>Hello</div>

/* generated css */
.card[_ngcontent-abc] { color: navy; }

สไตล์ภายนอกไม่รั่วไหลเข้ามา

เช่นเดียวกับที่สไตล์ของคุณยังคงอยู่ภายใน สไตล์ภายนอกส่วนใหญ่ก็จะไม่เขียนทับกฎของคอมโพเนนต์โดยไม่ได้ตั้งใจ ทำให้คอมโพเนนต์ทำงานได้อย่างเป็นอิสระในตัวเอง

สไตล์ส่วนกลาง

สำหรับสไตล์ที่ใช้ทั่วทั้งแอป ให้ใช้ styles.css ส่วนกลางที่ระบุไว้ใน angular.json สไตล์เหล่านี้จะไม่ถูกจำกัดขอบเขต

/* src/styles.css - global */
body { font-family: system-ui; }

สไตล์ชีตหลายไฟล์

คอมโพเนนต์สามารถโหลดสไตล์ชีตหลายไฟล์ได้โดยระบุไฟล์เหล่านั้นในอาร์เรย์

@Component({
  selector: "app-page",
  styleUrls: ["./base.css", "./layout.css"]
})
export class PageComponent {}

การใช้การผูกคลาส

สไตล์ที่จำกัดขอบเขตทำงานร่วมกับการผูกคลาสได้เป็นอย่างดี เพื่อใช้กฎตามเงื่อนไข

<div class="card" [class.featured]="isFeatured"></div>

/* card.component.css */
.featured { border-color: gold; }

เหตุผลที่การจำกัดขอบเขตมีประโยชน์

สไตล์ที่จำกัดขอบเขตช่วยป้องกันชื่อชนกันในแอปขนาดใหญ่ ทำให้ทีมต่าง ๆ ทำงานแยกกันได้ และทำให้คอมโพเนนต์นำไปใช้ซ้ำได้ง่ายและเข้าใจการทำงานได้ชัดเจน

ตรวจสอบความเข้าใจอย่างรวดเร็ว

ทดสอบความเข้าใจของคุณเกี่ยวกับสไตล์ที่จำกัดขอบเขตอยู่ในคอมโพเนนต์

สรุปทบทวน

คอมโพเนนต์รองรับ CSS ผ่าน styles, styleUrls หรือ styleUrl ตามค่าเริ่มต้น กฎเหล่านี้จะจำกัดขอบเขตอยู่ในคอมโพเนนต์ เพื่อป้องกันการชนกัน ให้ใช้สไตล์ชีตส่วนกลางสำหรับกฎที่ใช้ทั่วทั้งแอป

คำถามที่พบบ่อย

บทเรียน “สไตล์ที่จำกัดขอบเขตอยู่ในคอมโพเนนต์” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “สไตล์ที่จำกัดขอบเขตอยู่ในคอมโพเนนต์” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “สไตล์ที่จำกัดขอบเขตอยู่ในคอมโพเนนต์”

จำกัดสไตล์ให้ใช้เฉพาะภายในคอมโพเนนต์ คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน

บทเรียน “สไตล์ที่จำกัดขอบเขตอยู่ในคอมโพเนนต์” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม

ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. สไตล์ที่จำกัดขอบเขตอยู่ในคอมโพเนนต์
  2. โหมดการห่อหุ้มมุมมอง
  3. การกำหนดสไตล์ Host และ Host-Context
  4. คลาสและสไตล์แบบไดนามิก
← กลับไปที่ Angular Academy