Ionic 4 ionViewDidEnter() didnt triggered after navigated from ion-back-button

Question

I'm having stuck with Ionic apps. My problem is I want to refresh the root page after navigated from the other page by clicking the ion-back-button, I'm trying to use the ionic lifecycle events.

Anyone having issues with the ionViewDidEnter() too (like in my case)? As I know these lifecycle event function, it’s fired when entering a page, before it becomes the active one.

This is DOM elements when the QR page become active:

As you can see there are 2 pages inside <ion-router-outlet>. In my situation, the <app-home-tabs> is the root page. To navigate to the <app-my-qr> page from the root page, I use this.router.navigateByUrl('/my-qr', and then after I click <ion-back-button>, it's removed from the DOM.

The problem is the root page is not refreshed. I cant find the root caused of this problem..

home-tabs.router.module.ts:

Answer 1

我遇到了同样的问题，刚刚从 Ionic 团队成员liamdebeasi找到了一个解决方法：https : //github.com/ionic-team/ionic-framework/issues/16834
他很好地解释了这种情况并提供了一个解决方法。我只是在这里复制代码，有关更多详细信息，请访问链接。

嗨，大家好，

我想提供有关此问题状态的更新。与团队讨论后，我们确定这不是 Ionic Framework 中的错误；但是，我们意识到有一些有效的用例，其中开发人员可能希望在单个选项卡上侦听生命周期事件。因此，我们提供了一个临时解决方法以及进一步开发的计划。

为什么这不是错误？

当页面在 Ionic Framework 中转换时，它们会触发生命周期事件。例如，从 /page1 到 /page2 将触发 Page1 组件上的 ionViewWillLeave 和 ionViewDidLeave 事件，以及 Page2 组件上的 ionViewWillEnter 和 ionViewDidEnter 事件。当从 /tabs/tab1 转到 /tabs/tab2 时，同样的逻辑适用。在这两种情况下，我们都处于相同的母离子路由器出口环境中。

在 ion-router-outlet 上下文之间导航时会出现报告的问题。在这种情况下，我们在从 /tabs/tab1 导航到 /page2 时会看到它。当这种转换发生时，Tab1 保持活动选项卡，并且整个选项卡上下文转换离开。因此，生命周期事件将在根 TabsPage 组件上触发，但不会在 Tab1 上触发。

对于许多用户来说，这是出乎意料的，因为 Tab1 在视觉上似乎过渡了。然而，在引擎盖下，整个选项卡上下文都消失了。

解决方法是什么？

幸运的是，对于希望在单个选项卡页面上侦听生命周期事件的开发人员来说，有一个易于使用的解决方法：

标签页.html

<ion-tabs #tabs (ionTabsDidChange)="tabChange(tabs)">
  ...
</ion-tabs>

tabs.page.ts

import { Component } from '@angular/core';
import { IonTabs } from '@ionic/angular'

@Component({
  selector: 'app-tabs',
  templateUrl: 'tabs.page.html',
  styleUrls: ['tabs.page.scss']
})
export class TabsPage {
  private activeTab?: HTMLElement;

  constructor() {}
  
  tabChange(tabsRef: IonTabs) {
    this.activeTab = tabsRef.outlet.activatedView.element;
  }

  ionViewWillLeave() {
    this.propagateToActiveTab('ionViewWillLeave');
  }
  
  ionViewDidLeave() {
    this.propagateToActiveTab('ionViewDidLeave');
  }
  
  ionViewWillEnter() {
    this.propagateToActiveTab('ionViewWillEnter');
  }
  
  ionViewDidEnter() {
    this.propagateToActiveTab('ionViewDidEnter');
  }
  
  private propagateToActiveTab(eventName: string) {    
    if (this.activeTab) {
      this.activeTab.dispatchEvent(new CustomEvent(eventName));
    }
  }
}

Answer 2

几天后，我找到了原因和解决方案。实际上问题是子组件不会刷新/重新加载...内部有一个<app-home>子(home.page.ts)组件<app-home-tabs>可以在 DOM 元素内部

不会ionViewWillEnter()在子组件中触发(home.page.ts)。

home-tabs.router.module.ts：

将这个函数放入父组件之后，即home-tabs.page.ts, <app-home-tabs>。它调用子组件来强制更新自身。只需使用import { Events } from '@ionic/angular';

父组件：

async ionViewDidEnter() {
    // This will be called everytime the page become active
    console.log('UpdateHome');
    this.events.publish('UpdateHome');
    ...
}

在子组件内部：

ionViewWillEnter() {
  this.events.subscribe('UpdateHome', async () => {
      console.log('UpdateHome');
      // Update itself
      let loading = await this.loadctrl.create();
      await loading.present();
      await this.getUser();
      this.menuCtrl.enable(true);
      await loading.dismiss();
  });
}