การสร้างพฤติกรรมที่นำกลับมาใช้ใหม่ได้
จัดแพ็กเกจพฤติกรรมเป็นไดเรกทีฟที่นำมาประกอบใช้ร่วมกันได้
การสร้างพฤติกรรมที่นำกลับมาใช้ใหม่ได้ เป็นบทเรียน Angular Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Angular Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
พฤติกรรมในฐานะส่วนประกอบพื้นฐาน
API การนำมาประกอบจะแสดงประสิทธิภาพได้อย่างเต็มที่เมื่อคุณออกแบบคำสั่งขนาดเล็กที่มุ่งเน้นเฉพาะด้าน โดยแต่ละคำสั่งห่อหุ้มพฤติกรรมหนึ่งอย่าง แล้วนำมาประกอบเข้ากับคอมโพเนนต์ตามต้องการ
คำสั่งที่มีจุดประสงค์เดียว
ทำให้แต่ละพฤติกรรมมีขนาดเล็กและทำงานได้อย่างอิสระ
@Directive({
selector: '[appElevate]'
})
export class ElevateDirective {
@HostBinding('style.boxShadow')
shadow = '0 2px 8px rgba(0,0,0,.15)';
}พฤติกรรมเมื่อวางเมาส์เหนือ
พฤติกรรมอีกอย่างหนึ่งจะตรวจจับการวางเมาส์เหนือองค์ประกอบและสลับคลาส
@Directive({ selector: '[appHoverClass]' })
export class HoverClassDirective {
@HostBinding('class.is-hover') hovering = false;
@HostListener('mouseenter') on() { this.hovering = true; }
@HostListener('mouseleave') off() { this.hovering = false; }
}การนำพฤติกรรมมาประกอบ
คอมโพเนนต์การ์ดนำพฤติกรรมทั้งสองอย่างมาประกอบกันโดยไม่ต้องเชื่อมโยงในแม่แบบ
@Component({
selector: 'app-card',
hostDirectives: [ElevateDirective, HoverClassDirective],
template: '<ng-content></ng-content>'
})
export class CardComponent {}การนำกลับมาใช้กับคอมโพเนนต์ต่าง ๆ
คุณสามารถนำพฤติกรรมเดียวกันไปประกอบกับปุ่ม ไทล์ หรือแผงได้ เพียงกำหนดครั้งเดียวแล้วนำกลับมาใช้ได้ทุกที่ โดยไม่ต้องเขียนซ้ำ
พฤติกรรมที่กำหนดค่าได้
เพิ่มอินพุตเพื่อให้สามารถปรับพฤติกรรมได้ จากนั้นเปิดเผยอินพุตเหล่านั้นในจุดที่นำพฤติกรรมไปประกอบ
@Directive({ selector: '[appElevate]' })
export class ElevateDirective {
level = input(1);
}การเปิดเผยตัวปรับค่า
เปิดเผยอินพุตที่กำหนดค่าได้ เพื่อให้โฮสต์แต่ละตัวตั้งค่าได้
hostDirectives: [{
directive: ElevateDirective,
inputs: ['level']
}]การประสานงานระหว่างพฤติกรรม
พฤติกรรมสามารถฉีดพฤติกรรมอื่นผ่านตัวฉีดขององค์ประกอบเพื่อประสานงานกันได้ เช่น Ripple ตอบสนองต่อสถานะการกด
ความสามารถในการทดสอบ
พฤติกรรมขนาดเล็กทดสอบแบบหน่วยได้ง่ายเมื่อแยกทดสอบ จากนั้นจึงมั่นใจได้เมื่อนำมาประกอบ ช่วยเพิ่มความน่าเชื่อถือโดยรวม
หลักการตั้งชื่อ
ตั้งชื่อพฤติกรรมตามสิ่งที่ทำ (appElevate, appHoverClass, appAutofocus) ชื่อที่ชัดเจนช่วยให้เข้าใจการนำมาประกอบได้จากชื่อโดยไม่ต้องอ่านเอกสารเพิ่มเติม
คลังพฤติกรรม
เมื่อเวลาผ่านไป คุณจะสร้างคลังพฤติกรรมที่นำมาประกอบได้ ซึ่งคอมโพเนนต์ใด ๆ ก็เลือกใช้ได้ ช่วยลดตรรกะของโฮสต์ที่ต้องเขียนซ้ำลงอย่างมาก
ตรวจสอบความเข้าใจอย่างรวดเร็ว
ทดสอบความเข้าใจเกี่ยวกับพฤติกรรมที่นำกลับมาใช้ใหม่ได้
สรุปทบทวน
คุณได้เรียนรู้การออกแบบคำสั่งขนาดเล็กที่ทำงานได้อย่างอิสระ โดยแต่ละคำสั่งห่อหุ้มพฤติกรรมหนึ่งอย่าง นำมาประกอบด้วย hostDirectives เปิดเผยอินพุตที่ปรับค่าได้ และสร้างคลังพฤติกรรมที่นำกลับมาใช้ใหม่และทดสอบได้
คำถามที่พบบ่อย
บทเรียน “การสร้างพฤติกรรมที่นำกลับมาใช้ใหม่ได้” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การสร้างพฤติกรรมที่นำกลับมาใช้ใหม่ได้” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Angular Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Angular Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การสร้างพฤติกรรมที่นำกลับมาใช้ใหม่ได้”
จัดแพ็กเกจพฤติกรรมเป็นไดเรกทีฟที่นำมาประกอบใช้ร่วมกันได้ คุณปฏิบัติ Angular Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Angular Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Angular Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “การสร้างพฤติกรรมที่นำกลับมาใช้ใหม่ได้” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Angular Academy นี้ได้ไหม
ได้ บทเรียน Angular Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- พร็อพเพอร์ตี hostDirectives
- การเปิดเผยอินพุตและเอาต์พุต
- การสร้างพฤติกรรมที่นำกลับมาใช้ใหม่ได้
- การประกอบเทียบกับการสืบทอด