앱이 종료되지 않도록 탐색 기록에 페이지를 추가하는 방법은 무엇입니까?

이 작업을 수행하는 더 쉬운 방법이있을 수 있지만 다음 접근 방식은 사용자가 푸시 알림 또는 딥 링크가 열린 후 표시된 페이지에서 돌아가고 싶을 때 사용자 지정 논리를 실행할 수 있기 때문에 매우 유연한 방법입니다. .

이 StackBlitz 데모를 살펴보십시오 .

데모에서는 파일 DetailsPage의 다음 코드로 인해 앱이로드되는 즉시로 리디렉션 app-routing.module됩니다.

{
  path: "",
  redirectTo: "/details/1?fromDeepLink=true", // <-- here!
  pathMatch: "full"
}

어쨌든 중요한 부분은 DetailsPage. 여기에서 사용자가 a) 헤더의 뒤로 버튼 및 b) Android 기기의 물리적 뒤로 버튼을 사용하여 뒤로 돌아 가려고 할 때 발생하는 작업을 처리해야합니다.

코드는 매우 자명하지만 기본적으로 해당 페이지에서 fromDeepLink쿼리 문자열 매개 변수를 찾고 있습니다. 그렇다면 true앱은 헤더의 뒤로 버튼과 Android의 물리적 뒤로 버튼 모두에 대한 사용자 지정 작업을 등록합니다. 장치.

사용자 정의 조치는을 HomePage루트 페이지로 설정하지만 animationDirection매개 변수를로 설정합니다 'back'. 이렇게하면 실제로 탐색 스택에 추가하는 경우에도 사용자가 해당 페이지로 돌아가는 것처럼 보입니다.

다른 페이지에서 뒤로 버튼의 기본 동작에 영향을주지 않도록 사용자가 페이지를 떠나는 즉시이 사용자 지정 처리기가 제거된다는 점에 유의하는 것이 중요합니다.

import { Component, OnInit, ViewChild } from "@angular/core";
import { ActivatedRoute } from "@angular/router";

import { IonBackButtonDelegate, NavController,  Platform,  ViewDidEnter, ViewWillLeave } from "@ionic/angular";

import { Subscription } from "rxjs";

@Component({
  selector: "app-details",
  templateUrl: "./details.page.html",
  styleUrls: ["./details.page.scss"]
})
export class DetailsPage implements OnInit, ViewDidEnter, ViewWillLeave {
  @ViewChild(IonBackButtonDelegate, { static: false })
  public backButton: IonBackButtonDelegate;

  public itemId: number;
  public fromDeepLink: boolean = false;

  private unregisterBackButtonAction: Subscription;

  constructor(
    private platform: Platform,
    private route: ActivatedRoute, 
    private navCtrl: NavController,
  ) {}

  ngOnInit() {
    const itemIdParam = this.route.snapshot.paramMap.get("itemId");
    const fromDeepLinkParam = this.route.snapshot.queryParamMap.get('fromDeepLink');

    this.itemId = +itemIdParam;
    this.fromDeepLink = fromDeepLinkParam 
      ? fromDeepLinkParam.toLocaleLowerCase() === 'true' 
      : false;
  }

  ionViewDidEnter() {
    if(this.fromDeepLink) {
      this.initializeCustomBackButtonAction()
    }
  }

  ionViewWillLeave() {
    if(this.fromDeepLink) {
      this.removeCustomBackButtonAction();
    }
  }

  private initializeCustomBackButtonAction(): void {
    const leavingCallback = () => {
      console.log('Using custom back button action');
      this.navCtrl.navigateRoot('/home', { animationDirection: 'back' });
    };

    // Override the back button from the header
    if (this.backButton) {
      this.backButton.onClick = leavingCallback;
    }

    // Override the physical back button from Android devices
    this.unregisterBackButtonAction = this.platform.backButton.subscribeWithPriority(10, leavingCallback);
  }

  private removeCustomBackButtonAction(): void {
    this.unregisterBackButtonAction?.unsubscribe();
  }
}

ion-back-button탐색 스택에서 현재 페이지 앞에 페이지가 없으면 기본적 defaultHref으로이 표시되지 않으므로 데모에서 다음 과 같이 속성을 설정합니다 .

<ion-back-button defaultHref></ion-back-button>

구성 요소가 실제로이 뒤로 버튼이 내 사용자 정의 뒤로 버튼 동작으로 수행하는 작업을 재정의 할 것이기 때문에 비워 둡니다. 그러나 defaultHref템플릿에 추가해야합니다. 그렇지 않으면 뒤로 버튼이 표시되지 않습니다.