从离子后退按钮导航后，离子 4 ionViewDidEnter() 未触发

Question

我一直坚持使用 Ionic 应用程序。我的问题是我想 refresh root page 在 navigated from 其他页面后单击 ion-back-button，我正在尝试使用离子生命周期事件。

有人对 ionViewDidEnter() 也有问题吗（比如我的情况）？据我所知，这些生命周期事件函数会在进入页面时触发，然后才会变为活动页面。

当 QR 页面激活时，这是 DOM 个元素：

如您所见，<ion-router-outlet> 中有 2 个页面。在我的情况下，<app-home-tabs> 是根页面。要从根页面导航到 <app-my-qr> 页面，我使用 this.router.navigateByUrl('/my-qr'，然后在我单击 <ion-back-button> 后，它会从 DOM.

中删除

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

首页-tabs.router.module.ts:

Answer 1

您可以使用

ionViewWillEnter()
{
  console.log("ionViewWillEnter entered");
}

ionViewDidEnter()
{
  console.log("ionViewDidEnter entered");
}

Answer 2

请试试这个。最近也发生在我身上。

import { ViewChild } from '@angular/core';
import { IonBackButtonDelegate } from '@ionic/angular';

...
@ViewChild(IonBackButtonDelegate) backButton: IonBackButtonDelegate;
...

ionViewDidEnter() {
    console.log('ionViewDidEnter');
    this.setUIBackButtonAction();
  }

setUIBackButtonAction() {
this.backButton.onClick = () => {
  // handle custom action here
  console.log('is back on click');
  this.router.navigate(['/home-tabs/home'])
    .then(() => {
      window.location.reload();
    });
}

Answer 3

几天后，我找到了根源和解决方案。实际上问题是子组件不会 refresh/reload... <app-home-tabs> 里面有一个来自 (home.page.ts) 的子组件 <app-home> 可以在 DOM个元素。

子组件(home.page.ts)中未触发ionViewWillEnter()。

首页-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();
  });
}

Answer 4

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

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 bug in Ionic Framework; however, we realize there are valid use cases in which developers may want to listen for lifecycle events on an individual tab. Due to this, we have provided a temporary workaround as 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 ionViewWillLeave and ionViewDidLeave events on the Page1 component and ionViewWillEnter and ionViewDidEnter events on the Page2 component. The same logic applies when going from /tabs/tab1 to /tabs/tab2. In both of these scenarios, we are staying within the same parent ion-router-outlet context.

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

For many users, this is unexpected because Tab1 visually appears to transition away. However, under the hood, the entire tabs context transitions away.

What is the workaround?

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

tabs.page.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));
    }
  }
}

从离子后退按钮导航后，离子 4 ionViewDidEnter() 未触发

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

ionic-framework

angular

ionic4