ionic-team / ionic-team/ionic-framework

bug(nav): lifecycle events inside ion-nav fire incorrectly

Abierto
#25,675 8 comentarios 4 reacciones 0 asignados Ver en GitHub
package: angular type: bug
Lenguaje dominante
TypeScript
Estrellas
52.7k
Forks
13.3k
Merge medio
1 d 15 h
PR fusionados (30 d)
51

Descripción

### Prerequisites

- [X] I have read the [Contributing Guidelines](https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#creating-an-issue).
- [X] I agree to follow the [Code of Conduct](https://ionicframework.com/code-of-conduct).
- [X] I have searched for [existing issues](https://github.com/ionic-team/ionic-framework/issues) that already report this problem, without success.

### Ionic Framework Version

- [ ] v4.x
- [ ] v5.x
- [X] v6.x
- [ ] Nightly

### Current Behavior

I've come across with some strange behaviour, when you present a page using `ModalController`which wraps `ion-nav`.

### Parent Page

```typescript
public async openModal() {
const modal = await this.modalController.create({
component: ModalOutletPage,
componentProps: { component: AddCardPage },
});

await modal.present();
}
```

### Modal Outlet Page

```typescript
export class ModalOutletPage implements OnInit {
@Input() public component: HTMLElement;
@Input() public componentProps: unknown;
}
```

```html

```

in this test i console.log() `ionViewDidEnter()`, `ionViewDidLeave()`, `ngOnInit()`, `ngOnDestroy()` inside `add-card.page.ts`

### First time opening modal:
#### on open
1. ionViewDidEnter trigger
#### on close
1. ngOnInit trigger
2. ngOnDestroy trigger

### second time opening modal:
#### on open
1. ngOnInit trigger
2. ionViewDidEnter trigger twice
3. ionViewDidLeave trigger
4. ngOnDestroy trigger
#### on close
1. ngOnInit trigger
2. ngOnDestroy trigger

https://user-images.githubusercontent.com/26873275/180785472-225256f1-c1d7-4e4c-a752-b37317ac55e9.mov

#### UPDATE
This is the behaviour, if i remove `changeDetection: ChangeDetectionStrategy.OnPush` inside `modal-outlet.page.ts`:

https://user-images.githubusercontent.com/26873275/180788325-724afcbb-c291-46ff-9a41-956a099e40fb.mov

### Expected Behavior

Lifecycle events should trigger correctly

### Steps to Reproduce

see video

### Code Reproduction URL

https://github.com/DwieDima/ion-nav-lifecycle-bug

### Ionic Info

Ionic CLI : 5.4.16
Ionic Framework : @ionic/angular 6.1.15
@angular-devkit/build-angular : 14.1.0
@angular-devkit/schematics : 13.2.6
@angular/cli : 14.1.0
@ionic/angular-toolkit : 6.1.0

Utility:

cordova-res : not installed
native-run : not installed

System:

NodeJS : v16.14.2
npm : 8.5.0
OS : macOS Monterey

### Additional Information

maybe related to #25638

Guía de contribución

Abrir la guía de contribución

Evaluación

Este issue todavía no se ha evaluado.

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.