การกำหนดสไตล์ Host และ Host-Context
กำหนดสไตล์ให้กับองค์ประกอบโฮสต์ของคอมโพเนนต์
การกำหนดสไตล์ Host และ Host-Context เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
การกำหนดสไตล์ให้องค์ประกอบโฮสต์
คอมโพเนนต์จะแสดงผลอยู่ภายในองค์ประกอบโฮสต์ของตนเอง (แท็กตัวเลือกของคอมโพเนนต์) คลาสเทียมพิเศษ :host ช่วยให้คุณกำหนดสไตล์ให้องค์ประกอบนั้นจาก CSS ของคอมโพเนนต์ได้
ตัวเลือก :host
ใช้ :host เพื่อกำหนดเป้าหมายองค์ประกอบของคอมโพเนนต์เอง เช่น กำหนดรูปแบบการแสดงผลและระยะห่าง
/* card.component.css */
:host {
display: block;
padding: 16px;
}เหตุผลที่ต้องใช้ :host
หากไม่มี :host คุณจะกำหนดสไตล์ให้องค์ประกอบโฮสต์จากภายในคอมโพเนนต์ไม่ได้ เพราะตัวเลือกที่จำกัดขอบเขตจะจับคู่ได้เฉพาะองค์ประกอบภายในแม่แบบเท่านั้น
:host พร้อมเงื่อนไข
คุณสามารถส่งตัวเลือกให้กับ :host() เพื่อกำหนดสไตล์ให้โฮสต์เฉพาะเมื่อโฮสต์ตรงตามเงื่อนไข เช่น มีคลาสที่กำหนด
:host(.active) {
border: 2px solid green;
}
<!-- applies when host has class active -->
<app-card class="active"></app-card>การผูกคลาสของโฮสต์
ใช้ :host() ร่วมกับการผูกคลาสของโฮสต์ เพื่อกำหนดสไตล์ให้คอมโพเนนต์ตามสถานะของคอมโพเนนต์เอง
@Component({
selector: "app-card",
host: { "[class.selected]": "isSelected" },
styleUrl: "./card.component.css"
})
export class CardComponent {
isSelected = true;
}ตัวเลือก :host-context
:host-context() กำหนดสไตล์ให้คอมโพเนนต์ตามเงื่อนไขของบรรพบุรุษใด ๆ ไม่ใช่โฮสต์เอง เหมาะอย่างยิ่งสำหรับการใช้ธีม
:host-context(.dark-theme) {
background: #222;
color: #eee;
}ตัวอย่างการใช้ธีม
หากองค์ประกอบแม่ที่อยู่สูงขึ้นไปในลำดับชั้นมีคลาส dark-theme กฎนี้จะมีผล ทำให้องค์ประกอบบรรพบุรุษหนึ่งรายการสามารถเปลี่ยนรูปลักษณ์ของคอมโพเนนต์ที่ซ้อนอยู่ได้
<body class="dark-theme">
<app-card></app-card>
<!-- card uses dark styles -->
</body>:host เทียบกับ :host-context
:host ตรวจสอบองค์ประกอบของคอมโพเนนต์เอง ส่วน :host-context ตรวจสอบองค์ประกอบบรรพบุรุษ ใช้ host สำหรับสถานะของตัวเอง และใช้ host-context สำหรับบริบทที่สืบทอดมา เช่น ธีม
การใช้ร่วมกับองค์ประกอบลูกหลาน
คุณสามารถต่อ :host-context เข้ากับตัวเลือกองค์ประกอบลูกหลาน เพื่อกำหนดสไตล์ให้องค์ประกอบภายในตามบริบทขององค์ประกอบบรรพบุรุษได้
:host-context(.compact) .title {
font-size: 12px;
}ค่าเริ่มต้นของการแสดงผลโฮสต์
โฮสต์ขององค์ประกอบกำหนดเองจะแสดงผลแบบอินไลน์ตามค่าเริ่มต้น การตั้งค่า display: block ให้กับ :host เป็นกฎแรกที่ใช้กันทั่วไป เพื่อให้การจัดวางทำงานได้อย่างคาดเดาได้
:host {
display: block;
}การใช้งานจริง
ใช้การกำหนดสไตล์โฮสต์เพื่อควบคุมกรอบภายนอกของคอมโพเนนต์ ตอบสนองต่อสถานะของคอมโพเนนต์เอง และปรับให้เข้ากับคลาสธีมโดยรอบ โดยยังคงจำกัดขอบเขตของสไตล์และมีความยืดหยุ่น
ตรวจสอบความเข้าใจอย่างรวดเร็ว
ทดสอบความเข้าใจของคุณเกี่ยวกับการกำหนดสไตล์โฮสต์
สรุปทบทวน
ใช้ :host เพื่อกำหนดสไตล์ให้องค์ประกอบของคอมโพเนนต์เองและสถานะขององค์ประกอบนั้น และใช้ :host-context() เพื่อตอบสนองต่อคลาสขององค์ประกอบบรรพบุรุษสำหรับการใช้ธีม การตั้งค่า display: block ให้โฮสต์เป็นค่าเริ่มต้นที่มีประโยชน์
คำถามที่พบบ่อย
บทเรียน “การกำหนดสไตล์ Host และ Host-Context” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การกำหนดสไตล์ Host และ Host-Context” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การกำหนดสไตล์ Host และ Host-Context”
กำหนดสไตล์ให้กับองค์ประกอบโฮสต์ของคอมโพเนนต์ คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “การกำหนดสไตล์ Host และ Host-Context” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม
ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- สไตล์ที่จำกัดขอบเขตอยู่ในคอมโพเนนต์
- โหมดการห่อหุ้มมุมมอง
- การกำหนดสไตล์ Host และ Host-Context
- คลาสและสไตล์แบบไดนามิก