Ionic ion-modal刷新后显示行为异常问题求助

问题场景 #

刚添加的按钮触发式卡片ion-modal显示正常：模态框覆盖部分屏幕，除顶部外贴合所有屏幕边缘；但刷新应用后显示异常，模态框被限制在缩小的背景区域内，与屏幕边缘存在间距。已移除所有自定义SCSS样式，问题仍存在。

相关代码 #

模态框模板：

<ion-modal #modal mode="ios" class="auto-height" trigger="open-schedule-modal" [presentingElement]="presentingElement">  
  <ng-template>    
    <ion-header>      
      <ion-toolbar>        
        <ion-title>Modal</ion-title>        
        <ion-buttons slot="end">          
          <ion-button (click)="modal.dismiss()">            
            <ion-icon name="close-outline"></ion-icon>          
          </ion-button>        
        </ion-buttons>      
      </ion-toolbar>    
    </ion-header>    
    <div class="inner-content">      
      <ion-list>        
        <ion-item>          ...        </ion-item>        
        <ion-item>          ...        </ion-item>      
      </ion-list>    
    </div>  
  </ng-template>
</ion-modal>

已排除问题的自定义SCSS：

ion-modal.auto-height {  
  &.bottom {    
    align-items: flex-end;  
  }  
  --height: auto;  
  .ion-page {    
    position: relative;    
    display: block;    
    contain: content;    
    bottom: 0;    
    .inner-content {      
      max-height: 80vh;      
      overflow: auto;      
      padding: 10px;    
    }  
  }
}

可能的解决方法 #

1. 修正presentingElement的赋值时机 #

刷新后presentingElement可能未正确绑定触发元素，导致模态框定位上下文错误。在组件初始化完成后再赋值：

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
import { IonModal } from '@ionic/angular';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.scss'],
})
export class YourComponentComponent implements AfterViewInit {
  @ViewChild('modal') modal!: IonModal;
  @ViewChild('openScheduleModal', { read: ElementRef }) triggerElement!: ElementRef;
  presentingElement?: HTMLElement;

  ngAfterViewInit() {
    this.presentingElement = this.triggerElement.nativeElement;
  }
}

同时给触发按钮添加模板引用：

<ion-button #openScheduleModal>打开模态框</ion-button>

2. 强制重置模态框内置样式变量 #

刷新后Ionic内置样式可能未正确加载，通过全局样式强制修正：

ion-modal.auto-height {
  --width: 100vw !important;
  --max-width: 100vw !important;
  --border-radius: 0 !important;
  --offset-top: 0 !important;
}

3. 改用手动触发替代trigger属性 #

trigger属性在刷新后可能存在绑定失效问题，改为手动调用present()方法：
模板中移除trigger属性：

<ion-modal #modal mode="ios" class="auto-height" [presentingElement]="presentingElement">
  <!-- 模态框内容 -->
</ion-modal>

<ion-button (click)="openModal()">打开模态框</ion-button>

组件中添加触发方法：

async openModal() {
  await this.modal.present();
}

4. 检查并升级Ionic版本 #

部分旧版本Ionic存在模态框刷新后样式异常的已知问题，升级到最新稳定版：

npm install @ionic/angular@latest

内容的提问来源于stack exchange，提问作者ela16