我一直在使用Ionic应用程序。我的问题是我想refresh
的root page
后navigated 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:
5条答案
按热度按时间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
tabs.page.ts
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';
父组件:
在子组件中:
qgelzfjb3#
请试试这个。最近也发生在我身上。
hi3rlvi24#
我也有同样的问题。我使用NavigationEnd的事件来从非标签页导航到标签页,并触发离子页面事件。代码段如下:
de90aj5v5#
您可以使用