ionic-team / ionic-team/ionic-framework

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

Offen
#25,675 8 Kommentare 4 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen
package: angular type: bug
Vorherrschende Sprache
TypeScript
Sterne
52.7k
Forks
13.3k
Ø Merge
1 T. 15 Std.
Gemergte PRs (30 T.)
51

Beschreibung

### 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

Beitragsleitfaden

Beitragsleitfaden öffnen

Bewertung

Dieses Issue wurde noch nicht bewertet.

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.