How to destroy Ionic Component on redirect

I have Ionic 4 Angular app. It has a three-tab structure. The tabs router module looks like this:

{
    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),
  }

On each tab I have different components which I want to be destroyed by a redirect to another tab. But the Component destroy event doesn't happen.

In my case Tab1 has this list:

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

'Invites' click takes me to the InvitesComponent. After that, if I click Tab2 InvitesComponent will stay there in its latest state. When I click Tab1 back I expect to see the default Tab1 screen but instead I meet by InvitesComponent opened.

I need somehow to destroy all child components by redirect events. I've already looked for (but no results):

1. How to destroy angular component by redirect
2. How to destroy angular component manually (programmatically)
3. Any types of 'Refs' that could be injected to represent current component entity (to call destroy() manually)

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW