angular - Ionic：如何强制以编程方式从 DOM 中“弹出”页面（无需按下 UI 后退按钮）

问题描述

我需要帮助解决我在使用我们的移动应用程序时遇到的问题。我们的应用程序是使用 ionic 5.1 和 angular v10.19.0 构建的。

我们的应用程序设计为，一旦用户登录并进行完全身份验证，他们就能够在他们所属的不同公司资料之间切换。

问题是当用户切换配置文件时；尽管它们被发送回应用程序主页，但当它们单击特定父选项卡时，会显示上一页。换句话说，它们不会发送到每个选项卡的主父页面。

阅读链接“离子如何处理页面的生命”后，我的理解是，我面临的问题正是文章所描述的。

“页面仅在“弹出”时从 DOM 中删除，例如，通过按下 UI 中的后退按钮或浏览器的后退按钮。由于这种特殊处理，ngOnInit 和 ngOnDestroy 方法可能不会像您通常那样触发认为他们应该这样做。”

所以我的问题是如何强制以编程方式从 DOM 中“弹出”页面（无需按下 UI 上的后退按钮）

我的代码实现如下：

Using the subscription library as follows (contactsPageSub: Subscription;)

ionViewWillEnter() {
  this.logger.info('ContactListPage', 'ionViewWillEnter');
  const contactView = this.firebaseService.getCustomView('TelephoneDirectoryPage');
  this.contactsPageSub = contactView.subscribe((viewContact) => {
    console.log('view ref ionViewWillEnter', [viewContact]);
    this.viewInfo = viewContact;
  }, (error) => {
    this.logger.error(error);
  });
}

 ionViewWillLeave() {
  this.logger.info('ContactListPage', 'ionViewWillLeave');
  if (this.contactsPageSub !== undefined) {
    this.contactsPageSub.unsubscribe();
  }
}

下面是实际目录的 HTML 代码（父选项卡）

<ion-tabs>
  <ion-tab-bar slot="bottom">

    <ion-tab-button tab="directory">
      <ion-icon name="people"></ion-icon>
      <ion-label>Directory</ion-label>
    </ion-tab-button>
    
  </ion-tab-bar>
</ion-tabs>

标签： angularionic-frameworklifecycleionic5

从 DOM 中弹出页面的最简单方法是使用NavController

import { NavController } from '@ionic/angular';

constructor(private navController: NavController) { }

someFunction () {
    // ...
    this.navController.pop(); // if the page can only be navigated to from the app (not typing the url in the browser's navigation bar)
    this.navController.navigateBack('parent-page'); // if the page can be accessed directly using the url
  }

基本上这正是它ion-back-button所做的。我个人更喜欢这种navigateBack方法，因为我不需要担心页面堆栈。它会弹出每一页，直到找到parent-page. 该pop方法也有效，但如果用户通过在导航栏上键入其 url 导航到当前页面，它将无效。

angular - Ionic：如何强制以编程方式从 DOM 中“弹出”页面（无需按下 UI 后退按钮）

问题描述

解决方案

推荐阅读