การเปิดเผยอินพุตและเอาต์พุต
เปิดเผยอินพุตและเอาต์พุตของไดเรกทีฟโฮสต์
การเปิดเผยอินพุตและเอาต์พุต เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
การเปิดเผยเอพีไอที่ประกอบกัน
เมื่อประกอบไดเรกทีฟผ่าน hostDirectives อินพุตและเอาต์พุตของไดเรกทีฟจะถูกซ่อนไว้ตามค่าเริ่มต้น เอพีไอการประกอบช่วยให้คุณเปิดเผยอินพุตและเอาต์พุตที่เลือกไว้ผ่านเอพีไอสาธารณะของโฮสต์ได้
รูปแบบออบเจ็กต์
แทนที่จะระบุเพียงคลาส ให้ใช้ออบเจ็กต์ที่มีอาร์เรย์ directive, inputs และ outputs
hostDirectives: [{
directive: TooltipDirective,
inputs: ['tooltipText'],
outputs: ['tooltipShown']
}]การเปิดเผยอินพุต
การระบุชื่ออินพุตใน inputs จะทำให้ผู้ใช้สามารถผูกอินพุตนั้นกับองค์ประกอบโฮสต์ได้
<app-button tooltipText="Save changes"></app-button>การเปิดเผยเอาต์พุต
การระบุเอาต์พุตจะทำให้โฮสต์ส่งเหตุการณ์ของคำสั่งนั้นต่อออกมาอีกครั้ง
<app-button (tooltipShown)="onShown()"></app-button>การเปลี่ยนชื่อเมื่อเปิดเผย
ใช้รูปแบบ publicName: internalName เพื่อเปลี่ยนชื่ออินพุตหรือเอาต์พุตขณะเปิดเผย
inputs: ['tooltipText: hint']
// consumers bind [hint]="..."การเปลี่ยนชื่อเอาต์พุต
เอาต์พุตสามารถเปลี่ยนชื่อได้ในลักษณะเดียวกัน
outputs: ['tooltipShown: shown']
// template: (shown)="..."เหตุใดจึงซ่อนไว้โดยค่าเริ่มต้น
การซ่อนอินพุตและเอาต์พุตที่นำมาประกอบช่วยให้ API ของโฮสต์มีเฉพาะสิ่งที่ตั้งใจเปิดเผย คุณจะเปิดเผยเฉพาะสิ่งที่เหมาะสมสำหรับผู้ใช้ และหลีกเลี่ยงการรั่วไหลของรายละเอียดภายในของคำสั่ง
การรวมกับอินพุตของตนเอง
โฮสต์สามารถมีอินพุตของตนเองควบคู่กับอินพุตที่เปิดเผยได้ โดย Angular จะรวมทั้งหมดเป็น API สาธารณะชุดเดียวบนองค์ประกอบนั้น
@Component({
selector: 'app-button',
hostDirectives: [{
directive: TooltipDirective,
inputs: ['tooltipText']
}]
})
export class ButtonComponent {
label = input('');
}ชื่อชนกัน
หากชื่ออินพุตที่เปิดเผยชนกับอินพุตของโฮสต์เอง การเปลี่ยนชื่อจะช่วยหลีกเลี่ยงความขัดแย้งและทำให้เจตนาชัดเจนขึ้น
การผูกข้อมูลสองทาง
หากต้องการรองรับการผูกข้อมูลสองทางผ่านการนำมาประกอบ ให้เปิดเผยทั้งอินพุตและเอาต์พุต Change ที่ตรงกัน โดยใช้ชื่อที่สอดคล้องกัน
แนวทางปฏิบัติที่ดี
เปิดเผยเฉพาะส่วนติดต่อที่จำเป็นและมีชื่อชัดเจนสำหรับผู้ใช้ เปลี่ยนชื่อภายในให้เข้ากับคำศัพท์ของคอมโพเนนต์ของคุณ ไม่ใช่ของคำสั่งที่อยู่เบื้องหลัง
ตรวจสอบความเข้าใจอย่างรวดเร็ว
ทดสอบความเข้าใจเกี่ยวกับการเปิดเผยอินพุตและเอาต์พุต
สรุปทบทวน
คุณได้เรียนรู้ว่าแบบออบเจ็กต์ของ hostDirectives ใช้เปิดเผย inputs และ outputs ที่เลือกไว้ให้กับ API ของโฮสต์ได้ พร้อมการเปลี่ยนชื่อแบบไม่บังคับด้วยรูปแบบ publicName: internalName ทำให้ส่วนติดต่อสาธารณะมีเฉพาะสิ่งที่ตั้งใจเปิดเผย
คำถามที่พบบ่อย
บทเรียน “การเปิดเผยอินพุตและเอาต์พุต” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การเปิดเผยอินพุตและเอาต์พุต” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การเปิดเผยอินพุตและเอาต์พุต”
เปิดเผยอินพุตและเอาต์พุตของไดเรกทีฟโฮสต์ คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “การเปิดเผยอินพุตและเอาต์พุต” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม
ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- พร็อพเพอร์ตี hostDirectives
- การเปิดเผยอินพุตและเอาต์พุต
- การสร้างพฤติกรรมที่นำกลับมาใช้ใหม่ได้
- การประกอบเทียบกับการสืบทอด