如何在重定向时销毁离子组件

Posted 2023-03-16

【中文标题】如何在重定向时销毁离子组件

【英文标题】：How to destroy Ionic Component on redirect

【发布时间】：2021-10-29 12:14:14

【问题描述】：

我有 Ionic 4 Angular 应用程序。它具有三标签结构。选项卡路由器模块如下所示：

    path: 'tab1',
    loadChildren: () =>
      import('../tab1/tab1.module').then((m) => m.Tab1PageModule),
  ,
  
    path: 'tab2',
    loadChildren: () =>
      import('../tab2/tab2.module').then((m) => m.Tab2PageModule),
  ,
  
    path: 'tab3',
    loadChildren: () =>
      import('../tab3/tab3.module').then((m) => m.Tab3PageModule),
  

在每个选项卡上，我都有不同的组件，我想通过重定向到另一个选项卡来销毁它们。但是不会发生组件销毁事件。

在我的例子中 Tab1 有这个列表：

  <ion-list>
    <ion-item routerLink="invites">Invites</ion-item>
    <ion-item>Friend Requests</ion-item>
  </ion-list>

“邀请”点击将我带到 InvitesComponent。之后，如果我单击 Tab2，InvitesComponent 将保持最新状态。当我点击 Tab1 返回时，我希望看到默认的 Tab1 屏幕，但我遇到的是 InvitesComponent opened。

我需要通过重定向事件以某种方式销毁所有子组件。我已经找过了（但没有结果）：

如何通过重定向销毁角组件 如何手动（以编程方式）销毁角组件 任何类型的“参考”，可以 被注入来表示当前的组件实体（调用destroy() 手动）

【参考方案1】：

我注意到 Tab1 按钮没有将我直接重定向到 /tabs/tab1。初次点击它是 /tabs/tab1。但是在打开 InvitectComponent 后，下一次 Tab1 点击会将我重定向到 /tabs/tab1/invites。这仍然让我感到惊讶。所以我刚刚在制表符属性之前添加了一个斜杠符号，这很有帮助。谁能解释一下为什么会这样？

 <ion-tabs>
      <ion-tab-bar slot="bottom">
        <ion-tab-button tab="/tab1">
          <ion-icon name="person-outline"></ion-icon>
        </ion-tab-button>
    
        <ion-tab-button tab="tab2">
          <ion-icon name="film-outline"></ion-icon>
        </ion-tab-button>
    
        <ion-tab-button tab="tab3">
          <ion-icon name="settings-outline"></ion-icon>
        </ion-tab-button>
      </ion-tab-bar>
    </ion-tabs>

最后，我删除了默认的 Ionic 选项卡组件，并使用带有 routerOutlet 的按钮

<ion-button routerLink="/tabs/tab1">
  <ion-icon name="person-outline"></ion-icon>
</ion-button>

<ion-button routerLink="/tabs/tab2">
  <ion-icon name="film-outline"></ion-icon>
</ion-button>

<ion-button routerLink="/tabs/tab3">
  <ion-icon name="settings-outline"></ion-icon>
</ion-button>