พร็อพเพอร์ตี hostDirectives
แนบไดเรกทีฟเข้ากับโฮสต์ของคอมโพเนนต์
พร็อพเพอร์ตี hostDirectives เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
เอพีไอการประกอบไดเรกทีฟ
เอพีไอการประกอบไดเรกทีฟ ช่วยให้คอมโพเนนต์หรือไดเรกทีฟนำไดเรกทีฟอื่นมาใช้กับองค์ประกอบโฮสต์ของตนเองได้ด้วยการประกาศผ่านคุณสมบัติ hostDirectives ทำให้สามารถนำพฤติกรรมกลับมาใช้ใหม่ได้โดยไม่ต้องสืบทอด
ปัญหาที่เอพีไอนี้แก้ไข
ก่อนหน้านี้ หากต้องการนำพฤติกรรมของไดเรกทีฟกลับมาใช้ใหม่ คุณต้องใส่ไดเรกทีฟซ้ำในทุกแม่แบบหรือใช้การสืบทอด ส่วน hostDirectives จะประกอบพฤติกรรมเข้ากับโฮสต์โดยตรง
ไวยากรณ์พื้นฐาน
ระบุไดเรกทีฟในอาร์เรย์ hostDirectives ของข้อมูลกำกับคอมโพเนนต์
@Component({
selector: 'app-menu',
hostDirectives: [CdkTrapFocus],
template: '<ng-content></ng-content>'
})
export class MenuComponent {}สิ่งที่เกิดขึ้น
Angular จะนำ CdkTrapFocus ไปใช้กับองค์ประกอบโฮสต์ app-menu ทุกแห่งโดยอัตโนมัติ ผู้ใช้จะได้รับพฤติกรรมนี้ทันทีโดยไม่ต้องเพิ่มไดเรกทีฟด้วยตนเอง
ข้อกำหนด
ไดเรกทีฟโฮสต์ต้องเป็นแบบสแตนด์อโลน โดยต้องอ้างอิงคลาสของไดเรกทีฟโดยตรง ไม่ใช่ตัวเลือกของไดเรกทีฟ
ไดเรกทีฟโฮสต์หลายรายการ
ประกอบหลายพฤติกรรมเข้าด้วยกันได้โดยระบุรายการทั้งหมด
hostDirectives: [
HighlightDirective,
TooltipDirective,
CdkTrapFocus
]การนำไปใช้กับไดเรกทีฟ
ไดเรกทีฟเองก็มีไดเรกทีฟโฮสต์ได้เช่นกัน ทำให้สร้างพฤติกรรมแบบเป็นชั้นและประกอบกลับมาใช้ใหม่ได้
@Directive({
selector: '[appCard]',
hostDirectives: [HoverElevateDirective]
})
export class CardDirective {}ลำดับวงจรชีวิต
ไดเรกทีฟโฮสต์จะถูกสร้างอินสแตนซ์ขึ้นก่อนตรรกะในตัวสร้างของโฮสต์เอง ดังนั้นการตั้งค่าของไดเรกทีฟจึงพร้อมใช้เมื่อโฮสต์เริ่มต้น
การฉีดการพึ่งพา
สามารถฉีดไดเรกทีฟโฮสต์เข้าไปในโฮสต์ และฉีดโฮสต์กลับเข้าไปในไดเรกทีฟโฮสต์ได้ผ่านตัวฉีดระดับองค์ประกอบ ทำให้พฤติกรรมที่ประกอบกันสามารถประสานงานกันได้
private trap = inject(CdkTrapFocus);ไม่ต้องแก้ไขแม่แบบ
ข้อดีสำคัญคือ ผู้ใช้ app-menu ไม่จำเป็นต้องรู้จัก CdkTrapFocus พฤติกรรมดังกล่าวถูกซ่อนไว้ในคำจำกัดความของคอมโพเนนต์
ควรเลือกใช้เมื่อใด
ใช้ hostDirectives เพื่อรวมพฤติกรรมที่ใช้ร่วมกันหลายส่วน เช่น การดักโฟกัส ระลอกคลื่น และการวิเคราะห์ข้อมูล เข้ากับคอมโพเนนต์หรือไดเรกทีฟอย่างเป็นระเบียบและนำกลับมาใช้ใหม่ได้
ตรวจสอบความเข้าใจ
ทดสอบความเข้าใจเกี่ยวกับ hostDirectives
สรุปทบทวน
คุณได้เรียนรู้ว่าคุณสมบัติ hostDirectives ใช้นำไดเรกทีฟแบบสแตนด์อโลนไปใช้กับองค์ประกอบโฮสต์ของคอมโพเนนต์หรือไดเรกทีฟโดยอัตโนมัติ ทำให้สามารถนำพฤติกรรมกลับมาใช้ใหม่ผ่านการประกอบได้โดยไม่ต้องแก้ไขแม่แบบหรือใช้การสืบทอด
คำถามที่พบบ่อย
บทเรียน “พร็อพเพอร์ตี hostDirectives” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “พร็อพเพอร์ตี hostDirectives” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “พร็อพเพอร์ตี hostDirectives”
แนบไดเรกทีฟเข้ากับโฮสต์ของคอมโพเนนต์ คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “พร็อพเพอร์ตี hostDirectives” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม
ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- พร็อพเพอร์ตี hostDirectives
- การเปิดเผยอินพุตและเอาต์พุต
- การสร้างพฤติกรรมที่นำกลับมาใช้ใหม่ได้
- การประกอบเทียบกับการสืบทอด