ฮุก ngOnDestroy ใน Angular

ฮุก ngOnDestroy จะทำงานเมื่อ คอมโพเนนต์ถูกนำออก ในฮุกนี้คุณสามารถ ปล่อยทรัพยากร ตัดการติดตามเหตุการณ์ขององค์ประกอบ หยุดตัวจับเวลา ฯลฯ

การสร้างและการลบคอมโพเนนต์ใน Angular เกิดขึ้นเมื่อคอมโพเนนต์ถูกแสดงหรือซ่อนแบบรีแอคทีฟ โดยใช้เงื่อนไข if นั่นคือ Angular ไม่ได้เพียงแค่ซ่อนคอมโพเนนต์ แต่ลบพวกมันออกและสร้างคืนกลับมาใหม่

นอกจากนี้คอมโพเนนต์ยังถูกสร้างและลบ เมื่อพวกถูกวนลูปแบบรีแอคทีฟ ในกรณีนี้ Angular ก็จะสร้างและ ลบคอมโพเนนต์เช่นกัน

มาลองปฏิบัติกันดีกว่า นำเข้า อินเทอร์เฟซ OnDestroy:

import { OnDestroy } from '@angular/core';

เชื่อมต่อมันกับคลาส:

export class UserComponent implements OnDestroy {
	
}

และตอนนี้มาเขียนฮุกของเรา:

export class UserComponent implements OnDestroy {
	constructor() {
		console.log('constructor is started');
	}
	
	ngOnDestroy() {
		console.log('onDestroy is applied');
	}
}

สร้าง if แบบรีแอคทีฟขึ้นมา เพื่อใช้แสดง/ซ่อนคอมโพเนนต์ลูก ทดสอบการทำงานของฮุกที่ได้เรียนรู้มา

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