วัฏจักรชีวิตของส่วนประกอบเชิงมุมและวิธีการต่างๆ ที่อธิบาย

Angular เปิดตัวในปี 2552 โดย Google เป็นเฟรมเวิร์กการพัฒนา JavaScript พร้อมภาษาการเขียนโปรแกรม Typescript เป็นหนึ่งในกรอบการออกแบบที่ได้รับความนิยมมากที่สุดสำหรับการพัฒนาแอพ ส่วนที่ดีที่สุดเกี่ยวกับกรอบงานเชิงมุมคือมันเป็นแอปพลิเคชันโอเพนซอร์ซ นักพัฒนาใช้กรอบงานเชิงมุมเพื่อสร้างแอปพลิเคชันมือถือและเว็บและแสดงข้อมูลเป็นภาพ สำหรับการพัฒนาเชิงมุม นักพัฒนาต้องปฏิบัติตามกระบวนการที่เรียกว่าวงจรชีวิตเชิงมุม

บล็อกนี้ช่วยให้คุณเข้าใจวงจรชีวิตเชิงมุมและวิธีการเบ็ดต่างๆ

วงจรชีวิตเชิงมุมคืออะไร?

วัฏจักรของเหตุการณ์ที่จำเป็นในการรันองค์ประกอบเชิงมุมเรียกว่าวงจรชีวิตเชิงมุม ส่วนประกอบเชิงมุมเป็นส่วนประกอบสำคัญของแอปพลิเคชันที่จำเป็นสำหรับ UI พูดง่ายๆ ก็คือ ส่วนประกอบเชิงมุมคือบล็อกที่รับผิดชอบในการควบคุมแพตช์ของหน้าจอในแอปพลิเคชันเชิงมุม ส่วนประกอบประกอบด้วยคุณสมบัติต่างๆ พร้อมด้วยตัวเลือก เทมเพลต และสไตล์ คอมโพเนนต์ยังต้องการข้อมูลเมตาสำหรับการประมวลผล

Angular ดำเนินการตามขั้นตอนการตรวจจับการเปลี่ยนแปลงต่างๆ เพื่อติดตามการเปลี่ยนแปลงในคุณสมบัติที่ผูกกับข้อมูลระหว่างวงจรชีวิต วงจรชีวิตเชิงมุมเริ่มต้นเมื่อ Angular เริ่มต้นคลาสส่วนประกอบ จากนั้นกำหนดมุมมองของคอมโพเนนต์และมุมมองของคอมโพเนนต์ย่อย ในตอนท้าย Angular จะทำลายส่วนประกอบที่ไม่ได้ใช้งานอีกต่อไป นอกจากนี้ยังเรียกเมธอดต่าง ๆ ของ hook หลังจากที่สร้างอินสแตนซ์ส่วนประกอบ

ตะขอวงจรชีวิตองค์ประกอบเชิงมุมต่างๆ ทำหน้าที่เป็นฟังก์ชันในกรอบงานเชิงมุม แต่ละวิธีของ hook ช่วยให้นักพัฒนาสามารถเรียกใช้รหัสที่แตกต่างกันในระหว่างเหตุการณ์เฉพาะ

เรียนรู้หลักสูตรการพัฒนาซอฟต์แวร์ออนไลน์จากมหาวิทยาลัยชั้นนำของโลก รับโปรแกรม Executive PG โปรแกรมประกาศนียบัตรขั้นสูง หรือโปรแกรมปริญญาโท เพื่อติดตามอาชีพของคุณอย่างรวดเร็ว

วงจรชีวิตของส่วนประกอบเชิงมุม

ส่วนประกอบเชิงมุมทั้งหมดมีวงจรชีวิตที่แตกต่างกัน แบ่งออกเป็นแปดขั้นตอนที่แตกต่างกัน ขั้นตอนเหล่านี้เรียกว่าเหตุการณ์ของ lifecycle hook ที่สามารถใช้แยกกันในเวลาที่สมัคร ก่อนที่วงจรชีวิตจะเริ่มต้น เราเรียกใช้ตัวสร้างของคลาสคอมโพเนนต์ จากนั้นเหตุการณ์ของ hook ต่างๆ จะเกิดขึ้น เหตุการณ์เบ็ดของวงจรชีวิตเชิงมุมแบ่งออกเป็นสองประเภทหลัก เฟสหนึ่งเชื่อมโยงกับองค์ประกอบดั้งเดิมในขณะที่เฟสที่สองเกี่ยวข้องกับลูกขององค์ประกอบนั้น ๆ

ให้เราเข้าใจขั้นตอนต่างๆ ของวงจรชีวิตเชิงมุม:

• ngOnChanges:- เหตุการณ์ ngOnChanges() เกิดขึ้นเมื่อเราเปลี่ยนค่าของตัวควบคุมอินพุตภายในส่วนประกอบ และคุณสมบัติที่ถูกผูกไว้ของส่วนประกอบจะเปลี่ยนแปลงไป พูดง่ายๆ ก็คือ เมธอดของ hook นี้เกิดขึ้นเมื่อ Angular ตั้งค่าหรือรีเซ็ตคุณสมบัติ in-bound ของส่วนประกอบ ในระหว่างวิธีนี้ จะได้รับอ็อบเจ็กต์ 'SimpleCharge' สำหรับค่าคุณสมบัติปัจจุบันและก่อนหน้า
  วิธีเบ็ดนี้ได้รับแผนที่ข้อมูลที่เปลี่ยนแปลงของค่าคุณสมบัติปัจจุบันและก่อนหน้า แมปข้อมูลถูกห่อเป็น SimpleCharge โปรดจำไว้ว่าเหตุการณ์นี้เกิดขึ้นบ่อยมาก ดังนั้น คุณจึงต้องระมัดระวังอย่างยิ่งในขณะที่ทำการเปลี่ยนแปลงใดๆ ในระหว่างกิจกรรม เนื่องจากอาจส่งผลกระทบอย่างมากต่อประสิทธิภาพการทำงาน คุณต้องใช้วิธีเบ็ดนี้เฉพาะเมื่อส่วนประกอบมีอินพุตที่ถูกผูกไว้และคุณเปลี่ยนคุณสมบัติที่ถูกผูกไว้ของส่วนประกอบ ดังนั้นจึงมักจะถือว่าเป็นวิธีการโทรกลับ
• ngOnInit:- เหตุการณ์นี้ใช้เพื่อเริ่มต้นข้อมูลในองค์ประกอบ ngOnInit() เริ่มต้นส่วนประกอบหรือคำสั่งเมื่อคุณสมบัติผูกข้อมูลถูกแสดงโดย Angular และคุณสมบัติอินพุตถูกกำหนดโดยส่วนประกอบ วัตถุประสงค์หลักของ ngOnInit() คือการดำเนินการเริ่มต้นที่ซับซ้อน วิธีของ hook จะใช้ส่วนประกอบเพื่อแหล่งข้อมูลเริ่มต้นหรือตัวแปรท้องถิ่นเป็นค่าอย่างง่ายก่อน จากนั้นจะใช้เพื่อตั้งค่าคอมโพเนนต์เมื่อ Angular ตั้งค่าคุณสมบัติอินพุต โดยปกติเหตุการณ์ ngOnInit() จะถูกเรียกหลังจาก ngOnChanges หากส่วนประกอบมีคุณสมบัติที่ถูกผูกไว้ อย่างไรก็ตาม หากองค์ประกอบไม่มีคุณสมบัติที่ผูกไว้ เราสามารถดำเนินการเหตุการณ์ ngOnInit() ได้โดยตรง คุณต้องจำไว้ว่าเบ็ดนี้ถูกเรียกเพียงครั้งเดียว
• ngDoCheck:- เหตุการณ์เบ็ดนี้เกิดขึ้นทุกครั้งที่เราตรวจสอบคุณสมบัติของวิธีการป้อนข้อมูล เหตุการณ์ ngDoCheck เป็นส่วนสำคัญของวงจรการตรวจจับการเปลี่ยนแปลงแต่ละรอบ และสามารถใช้ร่วมกับการตรวจสอบลอจิกของคุณเองได้ เหตุการณ์นี้อำนวยความสะดวกในการตรวจสอบการเปลี่ยนแปลงที่กำหนดเองหรืออัลกอริทึมในส่วนประกอบ วิธีการจอง ngDoCheck ช่วยให้สามารถตรวจจับการเปลี่ยนแปลงที่ Angular ไม่สามารถตรวจพบได้ คุณสามารถเรียกใช้ ngDoCheck หลังจาก ngOnChanges สำหรับการตรวจหาการเปลี่ยนแปลงทุกครั้ง สามารถทริกเกอร์ได้หลังจาก ngOnInit ในการรันครั้งแรก แม้ว่าจะไม่มีการเปลี่ยนแปลงคุณสมบัติที่ผูกไว้ของส่วนประกอบก็ตาม
  
• ngAfterContentInit:- ขั้นตอนของ hook หรือวิธีวงจรชีวิตนี้คล้ายกับ ngOnInit เนื่องจากเกิดขึ้นเพียงครั้งเดียวในช่วงอายุการใช้งานของส่วนประกอบ คุณสามารถทริกเกอร์เหตุการณ์นี้ได้เพียงครั้งเดียวเมื่อคุณต้องตรวจสอบการเชื่อมโยงของส่วนประกอบเป็นครั้งแรก เราดำเนินการเหตุการณ์นี้หลังจากที่ Angular ดำเนินกิจกรรมการฉายเนื้อหาภายในองค์ประกอบ พูดง่ายๆ ก็คือ ngAfterContentInit จะทำงานเมื่อมีการฉายเนื้อหาภายนอกโดย Angular ในมุมมองของส่วนประกอบหรือมุมมองภายในที่มีคำสั่งอยู่ ngAfterContentInit ถูกเรียกใช้ Angular ทันทีหลังจากดำเนินการเมธอด ngDoCheck วิธีวงจรชีวิตนี้เกี่ยวข้องกับการเริ่มต้นองค์ประกอบลูก
  
• ngAfterContentChecked:- ขั้นตอนของ hook นี้เป็นการดำเนินการที่ตามมากับวิธี ngDoCheck ตามชื่อที่แนะนำ เมธอด ngAfterContentChecked จะดำเนินการหลังจาก Angular ตรวจพบการเปลี่ยนแปลงในเนื้อหาภายนอกที่ฉายภายในคอมโพเนนต์ เหตุการณ์นี้เกิดขึ้นหลังจากทุกรอบการตรวจจับการเปลี่ยนแปลง มันถูกเรียกหลังจาก ngAfterContentInit() และทุกๆ ngDoCheck() ที่ตามมา เช่นเดียวกับ ngAfterContentInit ngAfterContentChecked ยังเชื่อมโยงกับการเริ่มต้นองค์ประกอบลูก
  
• ngAfterViewInit:- ngAfterViewInit ถูกทริกเกอร์หลังจากการเริ่มต้นมุมมองของส่วนประกอบเสร็จสิ้น มันถูกเรียกเพียงครั้งเดียวหลังจากเมธอดวงจรชีวิต ngAfterContentChecked() วิธีการของ hook นี้ใช้สำหรับส่วนประกอบเท่านั้น ไม่ใช่ส่วนประกอบย่อย
  

  หลักสูตรและบทความยอดนิยมเกี่ยวกับวิศวกรรมซอฟต์แวร์

  โปรแกรมยอดนิยม
  หลักสูตร Executive PG ในการพัฒนาซอฟต์แวร์ - IIIT B	โปรแกรมใบรับรองบล็อคเชน - PURDUE	โปรแกรมใบรับรองความปลอดภัยทางไซเบอร์ - PURDUE	MSC ในวิทยาการคอมพิวเตอร์ - IIIT B
  บทความยอดนิยมอื่น ๆ
  Cloud Engineer เงินเดือนในสหรัฐอเมริกา 2021-22	เงินเดือนสถาปนิกโซลูชัน AWS ในสหรัฐอเมริกา	เงินเดือนนักพัฒนาแบ็กเอนด์ในสหรัฐอเมริกา	Front End Developer เงินเดือนในสหรัฐอเมริกา
  นักพัฒนาเว็บ เงินเดือนในสหรัฐอเมริกา	คำถามสัมภาษณ์ Scrum Master ในปี 2022	จะเริ่มอาชีพใน Cyber ​​​​Security ในปี 2022 ได้อย่างไร?	ตัวเลือกอาชีพในสหรัฐอเมริกาสำหรับนักศึกษาวิศวกรรม

• ngAfterViewChecked:- วงจรชีวิตนี้ถูกเรียกใช้เมื่อ Angular เสร็จสิ้นการตรวจจับหรือตรวจสอบมุมมองของส่วนประกอบหรือส่วนประกอบย่อย แม้ว่าเมธอด ngAfterViewChecked จะถูกเรียกหลังจากเมธอด ngAfterViewInit แต่จะถูกเรียกใช้งานหลังจากทุกระยะของวงจรชีวิต ngAfterContentChecked() ที่ตามมา วิธีเบ็ดนี้เกี่ยวข้องกับส่วนประกอบเชิงมุม เท่านั้น
  
• ngOnDestroy:- วิธีการของ hook ngOnDestroy() ถูกดำเนินการก่อนที่ Angular จะทำลายส่วนประกอบที่ไม่ต้องการอีกต่อไป วิธีวงจรชีวิตนี้จะแยกเหตุการณ์และช่วยหลีกเลี่ยงการรั่วไหลของหน่วยความจำ นอกจากนี้ยังยกเลิกการสังเกตได้ เราเรียกเหตุการณ์นี้เพียงครั้งเดียวก่อนที่จะลบองค์ประกอบ วิธีการของ hook นี้ทำหน้าที่เป็นการล้างข้อมูลก่อนที่ Angular จะทำลายส่วนประกอบ

อินเทอร์เฟซในวงจรชีวิตเชิงมุม

วงจรชีวิตเชิงมุมมักจะถูกกำหนดผ่านคลาสส่วนประกอบ อย่างไรก็ตาม อินเตอร์เฟสยังสามารถใช้เพื่อกำหนดคลาสองค์ประกอบเชิงมุม เนื่องจากเมธอดต่าง ๆ ของ hook มีอินเตอร์เฟส typescript ที่เกี่ยวข้องอยู่แล้ว เรามักจะเข้าใจว่าอินเทอร์เฟซเป็นคุณลักษณะที่ช่วยระบุวิธีการต่างๆ และคุณสมบัติที่เกี่ยวข้อง แม้ว่าจะไม่จำเป็น แต่ก็ขอแนะนำอย่างยิ่งให้ใช้อินเทอร์เฟซในวงจรชีวิตเชิงมุม วัตถุประสงค์ของแต่ละอินเทอร์เฟซคือการกำหนดต้นแบบสำหรับวิธีเบ็ด อินเทอร์เฟซถูกตั้งชื่อด้วยคำนำหน้า 'ng'

บทสรุป

องค์ประกอบเชิงมุมขึ้นอยู่กับการเขียนโปรแกรม typescript ดังนั้นจึงจำเป็นต้องรู้พื้นฐานของการเขียนโปรแกรม typescript ก่อนใช้วิธีการ hook รอบเชิงมุม นอกจากนี้ยังจำเป็นต้องเรียนรู้พื้นฐานของการออกแบบแอปเชิงมุม กระบวนการของวิธีวงจรชีวิต และความรู้เกี่ยวกับวิธีการใช้เบ็ด

หากคุณกำลังวางแผนที่จะประกอบอาชีพในการพัฒนาแอปเชิงมุม คุณต้องมีความรู้เชิงลึกเกี่ยวกับกระบวนการทั้งหมดและหน้าที่ของวิธีการเกี่ยวเบ็ดแบบต่างๆ นอกจากนี้ เนื่องจาก Angular เป็นเฟรมเวิร์กการพัฒนาจาวาสคริปต์ คุณต้องเรียนรู้ภาษาการเขียนโปรแกรม Java โปรแกรม Executive PG ของ upGrad ในการพัฒนาซอฟต์แวร์ เป็นตัวเลือกที่ยอดเยี่ยมในการเรียนรู้เกี่ยวกับการพัฒนาแอปเชิงมุมตั้งแต่เริ่มต้น