ค้นหาเว็บไซต์

typescript - การสืบทอดคอมโพเนนต์ของ Angular วิธีที่ hooks ของวงจรชีวิตของพ่อแม่สามารถถูกเรียกใช้งานได้?

ดังนั้นฉันมี BaseComponent และหลายๆ child ที่สืบทอดมัน:

export class Child1Component extends BaseComponent implements OnInit, AfterViewInit

Child1Component ไม่เรียก super.ngAfterViewInit() แต่ด้วยเหตุผลบางประการ BaseComponent AfterViewInit ถูกเรียกใช้งาน ฉันเพียงแค่ log มันใน console:

ngAfterViewInit() {
  console.log('BaseComponent AfterViewInit')
}

เป็นไปได้อย่างไร? มีอะไรบ้างนอกจาก super.ngAfterViewInit() ที่สามารถเรียก life cycle hook ของพ่อแม่ได้?

นี่อาจเกิดขึ้นได้เฉพาะในโหมดพัฒนาหรือไม่?

คำตอบ #1

ฉันคิดว่านี่เป็นพฤติกรรมการสืบทอดตาม OOP ที่ปกติ หากคุณไม่ได้กำหนด ngAfterViewInit ในคอมโพเนนต์ย่อยโดยตรง คอมโพเนนต์นี้ก็จะมีการใช้งานวิธีการของพ่อแม่ (parent) ในส่วนของวิธีนั้นได้

ดังนั้น ในช่วงวงจรชีวิตของคอมโพเนนต์ เมื่อ Angular ตรวจสอบว่าเมธอด ngAfterViewInit มีในคอมโพเนนต์ลูกหรือไม่ คำตอบคือ ใช่: คอมโพเนนต์ลูกมีการใช้งานเมธอดนั้น แต่เมธอดนั้นถูกสืบทอดมาจากคอมโพเนนต์พ่อแม่

คำตอบ #2

คอมโพเนนต์ลูกจะมี (โดยธรรมชาติ) คุณสมบัติและเมธอดทั้งหมดของคลาสคอมโพเนนต์ฐาน ดังนั้นปกติคลาสลูกจะมีเมธอด ngAfterViewInit และเมธอดนี้จะถูกเรียกโดย Angular ในกรณีที่คุณต้องการเขียนทับเมธอดนี้ เพียงสร้างมันใหม่ในคลาสลูก และมันจะมีสิทธิ์เหนือเมธอดในคลาสฐาน แต่ยังคงสามารถเข้าถึงคลาสฐานโดยใช้คีย์เวิร์ด 💪 super

export class Child1Component extends BaseComponent implements OnInit, AfterViewInit {

  ngAfterViewInit() {
    super.ngAfterViewInit(); // 👈 call base ngAfterViewInit method  
    console.log('Child1Component AfterViewInit');
  }

}

ngAfterViewInit เป็นเมธอดพิเศษ เป็นหนึ่งใน lifecycle hooks ซึ่งเป็นเมธอดที่ Angular รันและจัดการ อ่านเพิ่มเติมเกี่ยวกับเรื่องนี้ได้ที่นี่ 👉

บทความที่เกี่ยวข้อง