ionic-team / ionic-team/ionic-framework
bug(nav): lifecycle events inside ion-nav fire incorrectly
- 主要言語
- TypeScript
- スター
- 52.7k
- フォーク
- 13.3k
- 平均マージ
- 1日 15時間
- マージ済み PR(30日)
- 51
説明
### 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
コントリビューションガイド
調査の方向性
Start with the linked reproduction project and inspect modal-outlet.page.ts, add-card.page.ts, ModalController, and the ion-nav usage. Reproduce the modal open and close sequences with and without ChangeDetectionStrategy.OnPush, then compare the observed lifecycle events with the expected behavior described in the issue.
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- angular, typescript
- 領域
- frontend, mobile
- issue の種類
- バグ
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 活発さ
- 停滞
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 35/100