angular - 从 ionic 后退按钮导航后，Ionic 4 ionViewDidEnter() 未触发

Question

我一直坚持使用 Ionic 应用程序。我的问题是我想 refresh root page之后 navigated from点击 ion-back-button 进入另一个页面，我正在尝试使用 ionic 生命周期事件。

任何人在使用 ionViewDidEnter() 时遇到问题也是(就像我的情况)？据我所知，这些生命周期事件函数是在进入页面时触发，然后才变为事件页面。

这是 QR 页面激活时的 DOM 元素:



如您所见，<ion-router-outlet> 里面有 2 个页面.在我的情况下，<app-home-tabs>是根页面。导航至 <app-my-qr>来自根页面的页面，我使用 this.router.navigateByUrl('/my-qr' ，然后在我点击 <ion-back-button> 之后，它已从 DOM 中删除。



问题是根页面没有刷新。我找不到这个问题的根本原因..

home-tabs.router.module.ts:

Answer 1

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

Hi everyone,

I wanted to provide an update regarding the status of this issue.After discussing with the team, we have determined this is not a bugin Ionic Framework; however, we realize there are valid use cases inwhich developers may want to listen for lifecycle events on anindividual tab. Due to this, we have provided a temporary workaroundas well as plans for further development.

Why is this not a bug?

When pages transition in Ionic Framework, they fire lifecycle events.For example, going from /page1 to /page2 would fire ionViewWillLeaveand ionViewDidLeave events on the Page1 component and ionViewWillEnterand ionViewDidEnter events on the Page2 component. The same logicapplies when going from /tabs/tab1 to /tabs/tab2. In both of thesescenarios, we are staying within the same parent ion-router-outletcontext.

The reported issue occurs when navigating between ion-router-outletcontexts. In this case, we are seeing it when navigating from/tabs/tab1 to /page2. When this transition happens, Tab1 remains theactive tab, and the entire tabs context transitions away. As a result,lifecycle events will fire on the root TabsPage component, but not onTab1.

For many users, this is unexpected because Tab1 visually appears totransition away. However, under the hood, the entire tabs contexttransitions away.

What is the workaround?

Luckily, there is an easy to use workaround for developers who wish tolisten for lifecycle events on individual tab pages:

标签页.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));
    }
  }
}