ionic-team / ionic-team/ionic-framework
bug(nav): lifecycle events inside ion-nav fire incorrectly
- 主要语言
- TypeScript
- 星标
- 52.7k
- 派生
- 13.3k
- 平均合并
- 1 天 15 小时
- 30 天内合并 PR
- 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