Angular 6 ว่าด้วยเรื่อง Life Cycle ของ Component

ว่าง ๆ นั่งดู Life Cycle ของ Component ใน Angular 6 โดย component นั้นเป็นส่วนการทำงานหลัก ๆ ของ Angular เลยก็ว่าได้ เป็นสิ่งที่สำคัญมาก ทั้งการออกแบบเช่น Stateless และ Stateful component ทั้งการเข้าใจกระบวนการทำงาน ตลอดจน Life cycle ของมัน ใน blog นี้ไปดู Life cycle ของ component กัน พบว่ามันเยอะมาก ๆ นะ

Life cycle ของ component ประกอบไปด้วย 8 methods (จะเยอะไปไหน)

ซึ่งจะมีการทำงานเป็นลำดับที่ชัดเจนมาก โดยที่ constructor() นั้นจะถูกเรียกเมื่อ component ถูกสร้างขึ้นมาเสมอ เป็นความสามารถที่มีมาจากภาษา TypeScript อยู่แล้ว เราสามารถแบ่งกลุ่มของ method เป็น 2 กลุ่มคือ กลุ่มที่ 1 สำหรับ component หลัก

• ngOnChanges
• ngOnInit
• ngDoCheck
• ngOnDestroy

กลุ่มที่ 2 สำหรับ child component

• ngAfterContentInit
• ngAfterContentChecked
• ngAfterViewInit
• ngAfterViewChecked

มาดูว่าแต่ละ method นั้นถูกเรียกตอนไหนกันบ้าง ?

ngOnChanges จะถูกเรียก input หรือ output element ที่ binding ไว้มีการเปลี่ยนแปลงค่า ngOnInit จะถูกเรียกเมื่อ component ถูกสร้างขึ้นมา เรียกหลังจาก ngOnChanges() โดยใน method นี้ทำหน้าที่ในการ initial ค่าข้อมูลของ component ngDoCheck จะถูกเรียกทุกครั้งเมื่อเราไป focus ที่ element นั้น ๆ จากนั้นจะทำการตรวจสอบว่ามีการเปลี่ยนแปลงหรือไม่ ดังนั้นในส่วนนี้ใช้ไว้สำหรับดักจับการเปลี่ยนแปลงในรูปแบบที่ต้องการ ngOnDestroy จะถูกเรียกก่อนที่ component จะถูกทำลาย ใช้สำหรับการ unsubscribe พวก observable และ event ต่าง ๆ ที่ subscribed ไว้ เพื่อไม่ห้เกิดปัญหา memory leak ต่อไปเป็นกลุ่มของ method ที่ถูกเรียกหลังจาก ngDoCheck ngAfterContentInit จะถูกเรียกในการสร้าง view/content ครั้งแรก ngAfterContentChecked จะถูกเรียกเพื่อใช้ตรวจสอบการเปลี่ยนแปลงต่าง ๆ ของ child component ngAfterViewInit จะถูกเรียกเมื่อสิ่งต่าง ๆ ใน child component ทำการ initial เสร็จเรียบร้อย ngAfterViewChecked จะถูกเรียกเมื่อสิ่งต่าง ๆ ที่ binding ไว้ของ child component มีการเปลี่ยนแปลง ดังนั้นจะใช้สำหรับการรอค่าจะเปลี่ยนแปลงจาก child component นั่นเอง

อธิบายไปก็ยังงง ๆ ไม่เห็นภาพ เขียน code ดีกว่า

ก่อนอื่นนั้นต้องทำการ import และ implements interface ของ Life cycle ซึ่งเยอะมาก ดังนี้ [gist id="ee00755a33f40dad4d7309c8e7aaae17" file="app.component.ts"] จากนั้นก็ลอง run และ debug การทำงานดู ก็พบว่า เมื่อเริ่มต้นเข้าใช้งานครั้งแรก method ของ Life cycle ทำงานครบทั้ง 8 เลย แต่เมื่อทำการแก้ไขหรือ focus ไปยัง element หรือ child ต่าง ๆ ใน component จะทำการเรียก ngDoCheck, ngAfterContentChecked และ ngAfterViewChecked เสมอ

มาตรงนี้ถ้าอยากรู้อะไร อยากจัดการเรื่องอะไรตรงไหน ก็จะง่ายขึ้นอีก เมื่อเราเข้าใจ Life cycle ของ component