重新加载+导航到另一个页面后组件未销毁

Posted 2023-03-13

【中文标题】重新加载+导航到另一个页面后组件未销毁

【英文标题】：Component not destroyed after Reload + Navigating to another page

【发布时间】：2020-05-16 16:00:19

【问题描述】：

在 Ionic v4 应用程序中，当我刷新页面然后通过调用 Router.navigateByUrl() 导航回另一个页面时，不会调用 ngOnDestroy。

基于this answer，我尝试通过在ngOnDestroy 上应用@HostListener("window:beforeunload") 来破坏重新加载的页面，但我面临的问题与我需要的方式不同，即页面需要刷新后销毁，然后导航到另一个页面。

This demo 显示了我的问题，这些是重现它的步骤：

访问应用程序：应用程序自动加载到父页面，这是演示中的第一个也是唯一的选项卡 通过单击“导航到子”按钮导航到子页面：然后打开子页面 通过进入应用内浏览器中的栏地址，在其中单击，然后按回车键重新加载子页面（不要使用重新加载按钮，因为它会重新加载应用程序并直接指向父页面) 点击“导航回父页面”按钮导航回父页面

在最后一步中，控制台没有记录子页面被破坏，当从父页面再次访问时，它也没有记录它被初始化。这意味着子页面没有被破坏。

请注意，在子页面没有刷新的情况下，点击“Navigate Back to Parent”按钮，子组件会被销毁（调用ngOnDestroy），然后在下次访问时创建/初始化.

【参考方案1】：

每当组件在路由器刷新后初始化时，我发现一件奇怪的事情，该组件并没有在 Ionic 中销毁。

我尝试了以下方式。刷新子组件后。

在父组件中实现 OnInit 和 OnDestroy。 然后点击进入子组件，然后点击“导航到父组件” 之后我点击了导航到子组件。此处它在该控制台中显示“已初始化父组件和已销毁父组件”。`

export class Tab1Component implements OnInit, OnDestroy 

    constructor(private router: Router) 

    navigatToChild() 
      this.router.navigateByUrl("/tabs/tab1/child")
    

    ngOnInit() 
      console.log("Parent component initialized")
    

    @HostListener("window:beforeunload")
    ngOnDestroy() 
      console.log("Parent component destroyed")
    

【讨论】：

我像你一样添加了日志，我也注意到了这种行为。就像导航颠倒了一样：子组件保持原位，而父组件在每次导航时都被初始化和销毁​​