Ionic 从离子返回按钮导航后,离子4 ionViewDidEnter()未触发

inn6fuwd  于 2023-09-28  发布在  Ionic
关注(0)|答案(5)|浏览(206)

我一直在使用Ionic应用程序。我的问题是我想refreshroot pagenavigated from的其他页面通过点击ion-back-button,我试图使用离子生命周期事件。
有没有人对ionViewDidEnter()也有问题(就像我的情况一样)?据我所知,这些生命周期事件函数在进入一个页面时被触发,在它成为活动页面之前。
这是QR页面激活时的DOM元素:

正如你所看到的,<ion-router-outlet>里面有两个页面。在我的情况下,<app-home-tabs>是根页面。要从根页面导航到<app-my-qr>页面,我使用this.router.navigateByUrl('/my-qr',然后单击<ion-back-button>后,它将从DOM中删除。

问题是根页面没有刷新。我找不到这个问题的根源。
home-tabs.router.module.ts:

ruyhziif

ruyhziif1#

我也遇到了同样的问题,我刚刚从Ionic团队成员liamdebeasi那里找到了一个解决方案:https://github.com/ionic-team/ionic-framework/issues/16834
他很好地解释了这种情况,并提供了一个变通办法。我只是复制代码在这里,更多细节请访问链接.
大家好,
我想提供有关此问题状态的最新信息。在与团队讨论后,我们确定这不是Ionic Framework中的错误;然而,我们认识到,在一些有效的用例中,开发人员可能希望监听单个选项卡上的生命周期事件。因此,我们提供了一个临时的解决方案以及进一步开发的计划。
为什么这不是一个bug?
当页面在Ionic Framework中转换时,它们会触发生命周期事件。例如,从/page 1转到/page 2将在Page 1组件上触发ionViewWillLeave和ionViewDidLeave事件,在Page 2组件上触发ionViewWillEnter和ionViewDidEnter事件。当从/tabs/tab 1转到/tabs/tab 2时,同样的逻辑也适用。在这两种情况下,我们都停留在相同的父离子路由器插座上下文中。
在离子路由器插座上下文之间导航时出现报告的问题。在本例中,我们在从/tabs/tab 1导航到/page 2时看到它。当这种转换发生时,Tab 1仍然是活动的选项卡,整个选项卡上下文转换离开。因此,生命周期事件将在根TabsPage组件上触发,而不是在Tab 1上触发。
对于许多用户来说,这是意料之外的,因为Tab 1在视觉上看起来像是过渡了。然而,在引擎盖下,整个选项卡上下文转换消失。
解决方法是什么?
幸运的是,对于希望在单个选项卡页面上侦听生命周期事件的开发人员来说,有一个易于使用的解决方案:
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));
    }
  }
}
h5qlskok

h5qlskok2#

几天后,我找到了问题的根源和解决办法。实际上,问题是子组件不会刷新/重新加载…在<app-home-tabs>中有一个来自(home.page.ts)的子组件<app-home>,可以在DOM元素中看到。
在子组件(home.page.ts)中未触发ionViewWillEnter()
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();
  });
}
qgelzfjb

qgelzfjb3#

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

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

hi3rlvi24#

我也有同样的问题。我使用NavigationEnd的事件来从非标签页导航到标签页,并触发离子页面事件。代码段如下:

constructor( private router: Router) {
 this.router.events
        .pipe(filter((event) => event instanceof NavigationEnd))
        .subscribe((event: NavigationEnd) => {
            if (event.url === '/tabs/page-1') {
            console.log('page-1 has been entered.');
            //Here call the one event of Angular Life Cycle Events. In my case ngOnInit()
           this.ngOnInit();
         }
      });
  }
de90aj5v

de90aj5v5#

您可以使用

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

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

相关问题