bug: ionViewDidEnter not firing when you are using a component inside other component's ion-slide

[derek90]

Bug Report

Ionic version:

[ ] 4.x
[x] 5.1.0

Current behavior:

When having an ion page inside an ion-slide inside an ion-slides inside another ion page as follows:

ion page (main component)
    ion-slides
        ion-slide
            ion page (subcomponent)
        ion-slide
            ion page (subcomponent two)

the lifecycle method ionViewDidEnter in the deepest ion pages won't be fired once that slide is in the view (not even the first time that the main ion page is in the view)

Expected behavior:

The ionViewDidEnter lifecycle method should be fired once the ion-slide is the current slide in the main ion page

Steps to reproduce:

Just create a ionViewDidEnter method in an ion page which is a subcomponent inside an ion-slide inside a parent component. Once the app is running, open the main view and go to the slide where the subcomponent is, and check that its ionViewDidEnter method does not run.

Related code:

main.page.html

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="end">
      <ion-button (click)="close()">
        <ion-icon slot="icon-only" name="close"></ion-icon>
      </ion-button>
    </ion-buttons>
    <ion-title>Main Component</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-slides #slides pager="false" (ionSlidesDidLoad)="sliderDidLoad($event)">
    <ion-slide>
        <app-subcomponent></app-subcomponent>
    </ion-slide>

    <ion-slide>
      <app-subcomponent-two></app-subcomponent-two>
    </ion-slide>
  </ion-slides>
</ion-content>

main.page.ts

//...
export class MainPage {
  @ViewChild('slides', {static: false})
  public slider: IonSlides;

  //...

  constructor() { }

  //...

  sliderDidLoad(event) {
    this.slider.update();
  }

  //...

  ionViewDidEnter() {
    console.log('This runs as it should');
  }

}

subcomponent.page.ts

//...
export class SubcomponentPage {

  //...

  constructor() { }

  //...

  ionViewDidEnter() {
    console.log('This doesn't run not even one time, not even if the slide that contains this view is the current one');
  }

}

subcomponent-two.page.ts

export class SubcomponentTwoPage {

  //...

  constructor() { }

  //...

  ionViewDidEnter() {
    console.log('This doesn't run not even one time, not even if the slide that contains this view is the current one');
  }

}

Other information:

I saw this resolved issue #19792 which says that at least ionViewDidEnter method now should fire the first time that the main component view is shown, but it doesn't (and also, I think it should fire just when the subcomponent slide is the current slide)

Ionic info:

Ionic:

   Ionic CLI                     : 6.7.0 (C:\Users\Derek\AppData\Roaming\npm\node_modules\@ionic\cli)
   Ionic Framework               : @ionic/angular 5.1.0
   @angular-devkit/build-angular : 0.803.28
   @angular-devkit/schematics    : 8.3.26
   @angular/cli                  : 8.3.26
   @ionic/angular-toolkit        : 2.2.0

Capacitor:

   Capacitor CLI   : 2.0.2
   @capacitor/core : 2.0.2

Utility:

   cordova-res : not installed
   native-run  : 0.2.8

System:

   NodeJS : v12.16.3 (C:\Program Files\nodejs\node.exe)
   npm    : 6.14.3
   OS     : Windows 10

[liamdebeasi]

Thanks for the issue. I am going to close this as this is not a bug in Ionic Framework. The Ionic Lifecycle Hooks are directly tied to routing. In the case of your application, the components being rendered in ion-slides are not tied to routing, so the Ionic Lifecycle Hooks will not fire.

See https://ionicframework.com/docs/angular/lifecycle for more information on the lifecycle hooks.

For your use case, you can use the typical Angular component lifecycle hooks such as ngOnInit. If you are trying to detect when a slide changes, you can also listen for the ionSlideDidChange event: https://ionicframework.com/docs/api/slides#events

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.