ว่าง ๆ นั่งดู 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 ซึ่งเยอะมาก ดังนี้
จากนั้นก็ลอง run และ debug การทำงานดู
ก็พบว่า เมื่อเริ่มต้นเข้าใช้งานครั้งแรก
method ของ Life cycle ทำงานครบทั้ง 8 เลย
แต่เมื่อทำการแก้ไขหรือ focus ไปยัง element หรือ child ต่าง ๆ ใน component
จะทำการเรียก ngDoCheck, ngAfterContentChecked และ ngAfterViewChecked เสมอ
มาตรงนี้ถ้าอยากรู้อะไร อยากจัดการเรื่องอะไรตรงไหน
ก็จะง่ายขึ้นอีก เมื่อเราเข้าใจ Life cycle ของ component
