Làm thế nào để xử lý sự kiện vòng đời (Lifecycle Hooks) trong một trang của ứng dụng Ionic và sự khác biệt cơ bản giữa chúng với vòng đời của Angular/React là gì?

Question

Accepted Answer

Ứng dụng Ionic sử dụng cơ chế định tuyến (Navigation stack) giữ các trang cũ trong bộ nhớ thay vì hủy hoàn toàn khi người dùng chuyển trang. Do đó, các Lifecycle Hooks đặc thù của Ionic đóng vai trò quan trọng trong việc quản lý dữ liệu.
1. Các Ionic Page Lifecycle Hooks chính

ionViewWillEnter: Chạy ngay trước khi trang chuẩn bị xuất hiện trên màn hình.
ionViewDidEnter: Chạy sau khi trang đã hiển thị hoàn toàn.
ionViewWillLeave: Chạy trước khi rời khỏi trang.
ionViewDidLeave: Chạy sau khi đã rời khỏi trang.

2. Sự khác biệt với Angular Lifecycle

Trong Angular thuần, ngOnInit chỉ chạy một lần duy nhất khi component được khởi tạo.
Trong Ionic, nếu người dùng chuyển từ Trang A sang Trang B rồi bấm quay lại Trang A, Trang A không bị hủy (component không được tạo lại), dẫn đến ngOnInit của Trang A không chạy lại. Do đó, nếu cần tải lại dữ liệu mỗi khi người dùng quay lại trang, lập trình viên phải đặt logic gọi API vào ionViewWillEnter.

3. Ví dụ minh họa
import { Component } from '@angular/core';

@Component({
  selector: 'app-profile',
  templateUrl: './profile.component.html'
})
export class ProfileComponent {

ionViewWillEnter() {
    // Gọi API lấy dữ liệu mới nhất mỗi khi người dùng mở trang này
    this.loadUserData();
  }

loadUserData() {
    // Logic gọi API...
  }
}

Làm thế nào để xử lý sự kiện vòng đời (Lifecycle Hooks) trong một trang của ứng dụng Ionic và sự khác biệt cơ bản giữa chúng với vòng đời của Angular/React là gì?

Làm Chủ Phỏng Vấn & Nâng Cao Trình Độ Chuyên Nghiệp

Tải Tuyển Tập 100+ Câu Hỏi Phỏng Vấn Chuyên Sâu (PDF)

Cần Mentor Phỏng Vấn Thử 1-1 & Tối Ưu CV?

Kiểm Tra CV Chuẩn ATS Miễn Phí

Câu hỏi ionic liên quan cùng chủ đề