Override sự kiện back sử dụng ion-back-button trong Ionic

Trong phần này tôi sẽ sử dụng IonBackButtonDelegate để override sự kiến back to history route trong Ionic.

Cách bố trí component trong bài này là sử dụng 1 componet con là HeaderComponent và component cha sử dụng HeaderComponent là ParentComponent.

Tại header tôi sử dụng IonBackButtonDelegate:

// HTML code
<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button [text]="Return"></ion-back-button>
        </ion-buttons>
        <ion-title>Header Title</ion-title>
    </ion-toolbar>
</ion-header>

// Typescript code
import {
    Component,
    OnInit,
    Input,
    Output,
    EventEmitter,
    ViewChild
} from '@angular/core';
import { IonBackButtonDelegate } from '@ionic/angular';

export class HeaderComponent implements OnInit {
    @Output() backHandler = new EventEmitter<any>();

    @ViewChild(IonBackButtonDelegate, { static: false }) backButton: IonBackButtonDelegate;

    async ngOnInit() {
        if (this.backHandler.observers.length > 0) {
            this.backButton.onClick = () => {
                this.backHandler.emit();
            };

            this.platform.backButton.subscribeWithPriority(999, () => {
                this.backHandler.emit();
            });
        }
    }
}

Ở đây khai báo @ViewChild để sử dụng 1 thành phần con là backBtn trong IonBackButtonDelegate và this.backButton.onClick = () => {}; để override sự kiến bấm back btn, khi bấm sẽ không trở về trang trước trong stack history route nữa. Dùng EventEmitter để truyền ngược lại sự kiện click back btn trên header tới parent component để xử lý tùy logic. Ngoài ra, tôi cũng xử lý khi cũng override khi bấm hardware back button trên các thiết bị android tại dòng code **this.platform.backButton.subscribeWithPriority(999, () => { });

Tại component cha - ParentComponent

// HTML code
<header
    [title]="title"
    ...
    (backHandler)="backHandler()">
</header>

// Typescript code
import { Location } from "@angular/common";

export class ParentPage implements OnInit {
    constructor(
        private location: Location
    ) { }

    backHandler() {
        if (codition) {
            // Change to data state
        } else {
            this.location.back();
        }
    }
}

Trong backHandler(), có thể dựa theo điều kiện mà tôi có thể điều hướng xử lý dữ liệu hoặc return về trang trước trong stack history route.