web-dev-qa-db-fra.com

Ionic Les composants ne sont pas détruits après la navigation vers une autre page

Je travaille actuellement sur du code hérité où le projet est un Angular 6, Ionic 4 hybride. Tous les modules de fonctionnalités sont en cours de chargement paresseux).

Le problème est qu'après avoir accédé à une autre page, je peux voir sur l'onglet mémoire de l'outil de navigation que la page précédente est toujours là et que le ngOnDestroy n'a pas vraiment été déclenché.

Pour vous donner plus de détails, mon module de routage d'application est:

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';
import { routes } from './app.routes';


 @NgModule({
imports: [RouterModule.forRoot(routes, { enableTracing: false, useHash: false  
 })],
  exports: [RouterModule],
 })
 export class AppRoutingModule { }

Mes itinéraires sont:

  export const routes: Routes = [
     { 
       path: '', redirectTo: '/home',
       pathMatch: 'full' 
     },
     { 
     path: 'accounts',
     loadChildren: 
    '../pages/accounts/accounts.page.module#AccountsPageModule',
      canActivate: [AuthGuardService] 
     },
     {
     path: 'administration',
     loadChildren:      
'../pages/administration/administration.page.module#AdministrationPageModule' 
     },
    { 
     path: 'bookings',
     loadChildren: 
     '../pages/bookings/bookings.page.module#BookingsPageModule',
     canActivate: [AuthGuardService],

  },

et dans app.component.html, avec un ion-menu structure le routeur:

 <ion-router-outlet id="content" swipeBackEnabled="false"></ion-router-outlet>

Et enfin dans le composant navbar sur chaque lien j'utilise le [routerLink]="['/something']" directive du routeur.

La navigation fonctionne correctement. Le problème est qu'après un certain temps, le site est très lent car il a toujours tous les composants, pages et modules en mémoire même si l'utilisateur est dirigé vers une autre page et Angular aurait dû détruire le précédent.

J'utilise:

  • Angulaire: 6.1.7
  • Ionique: 4.1.2
angularionic-framework
8
k.explorer

J'ai finalement compris pourquoi.

  • J'ai complètement supprimé ionic de l'application et n'utilise que Angular router for navigation).

Maintenant, ngOnDestroy est appelé chaque fois que je navigue vers une autre page et que la page elle-même est supprimée du DOM.

1
k.explorer

Les pages de cache ionique sur la navigation et les hooks destroy et init ne fonctionnent pas.

Si vous devez effectuer certaines actions sur la navigation, vous devez utiliser ionic-router-outlet hooks.

  • ionViewWillEnter - Déclenché lorsque le composant en cours de routage est sur le point de s'animer.
  • ionViewDidEnter - Déclenché lorsque le composant en cours de routage a été animé.
  • ionViewWillLeave - Déclenché lorsque le composant en cours de routage est sur le point de s'animer.
  • ionViewDidLeave - Déclenché lorsque le composant en cours de routage s'est animé.

Vous n'avez pas besoin d'utiliser d'interfaces comme OnInit ou OnDestroy. Utilisez simplement un crochet.

Exemple:

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent {
  ionViewDidLeave() {
    // Do actions here
  }
}
4
Kliment Ru

Si vous utilisez Ionic (<ion-router-outlet> Et { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }), Comme mentionné dans l'autre réponse, les pages sont mises en cache et naviguent vers une autre page, ngOnDestroy n'est pas appelé.

Si vous ne le souhaitez pas, utilisez navigateRoot() de NavContrller:

this.navController.navigateRoot(['some-route']);

Et les utilisateurs ne pourront pas revenir à la page précédente.

1
Julius Dzidzevičius