【问题标题】:Is ngOnInit() always called when navigating to a Page in Ionic 4 using navCtrl.navigateRoot()?使用 navCtrl.navigateRoot() 导航到 Ionic 4 中的页面时是否总是调用 ngOnInit()?
【发布时间】:2023-03-09 22:49:01
【问题描述】:

我在新的 Ionic NavController 上找不到官方 Ionic 4 文档,我想知道我们是否可以假设 ngOnInit()总是在我们导航到的 Ionic Page 组件上被调用,如果我们使用navCtrl.navigateRoot() 来触发导航,即使该页面的实例已经存在(如果我们已经访问过该页面可能就是这种情况)。

在我看来,至少在使用navCtrl.navigateRoot() 时,总是在我们导航到的页面组件上调用ngOnInit() 方法。不过,我不确定在哪里可以找到有关此行为的确认信息。

如果不是这样,确保每次用户导航到页面时执行页面组件的方法的推荐方法是什么?

谢谢!

【问题讨论】:

    标签: angular ionic-framework ionic4


    【解决方案1】:

    Ionic 3 的导航系统是基于导航控制器的,而正如你所知,Ionic 4 促进了 Angular 的自然导航方式 - 路由器。

    在 Ionic 3 中,ngOnInit() 会为进入导航堆栈的组件/页面触发一次。

    因此,如果我们有一个导航堆栈并且调用 navCtrl.navigateRoot()(或在 ionic 3 中是 navCtrl.setRoot())将替换/删除旧实例并引入新实例,生命周期挂钩将被叫。

    在 Ionic 4 导航控制器中,按设计预期支持相同的行为,但不支持延迟加载的组件。因此,每次调用 nav.setRoot 等效项时您看到 ngOnInit 触发的原因是因为您替换了堆栈中的组件(有效地销毁它)并在其位置引入了一个新组件。

    在某些情况下,它不会被调用(例如,如果您开始使用 push/pop 并且您将以不会破坏您的页面/组件的不同方式管理堆栈 ([page1,page2]) - 然后ngOnInit 不会被调用。

    对于每次组件进入视图时调用的生命周期钩子 - 你记得它曾经是 ionViewDidEnter。你能检查一下这个在ionic 4中是否仍然有效吗?文档并没有说它不支持,反之亦然没有确认它。

    TBH 当我切换到 Ionic 4 时,我会考虑利用基于路由器的导航,因为导航控制器现在在 Ionic 4 中更像是一种向后兼容功能。

    【讨论】:

    • ionViewDidEnter 应该可以工作(但不清楚这是否只是为了向后兼容)但现在它也坏了,请参阅github.com/ionic-team/ionic/issues/15260
    • 确认它仍在工作,但不确定它是否仍然是首选方法
    猜你喜欢
    • 2020-06-09
    • 1970-01-01
    • 1970-01-01
    • 2018-04-23
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-11-06
    • 2020-09-10
    相关资源
    最近更新 更多