Angular+Ionic多模态框场景下，交易模态框无法关闭求助

问题原因 #

你当前用@ViewChild(IonModal)声明的modal变量只会获取页面中第一个匹配的IonModal实例（也就是先渲染的add-account模态框）。当你调用交易模态框的取消/确认函数时，实际操作的是账户模态框，导致交易模态框无法被正确关闭。

解决方案：为每个模态框设置独立的模板引用变量 #

1. 修改HTML代码，为模态框添加模板引用 #

给两个ion-modal分别添加唯一的模板引用变量：

<ion-modal trigger="add-account" #accountModal>
  <ng-template>
    <ion-header>
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-button (click)="cancel_account()">Cancel</ion-button>
        </ion-buttons>
        <ion-title>Welcome</ion-title>
        <ion-buttons slot="end">
          <ion-button (click)="confirm_account()" [strong]="true">Confirm</ion-button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>
  </ng-template>
</ion-modal>

<ion-modal trigger="add-transaction" #transactionModal>
  <ng-template>
    <ion-header>
      <ion-toolbar>
        <ion-buttons slot="start">
          <ion-button (click)="cancel_transaction()">Cancel</ion-button>
        </ion-buttons>
        <ion-buttons slot="end">
          <ion-button (click)="confirm_transaction()" [strong]="true">Confirm</ion-button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <!-- 交易模态框内容 -->
    </ion-content>
  </ng-template>
</ion-modal>

2. 修改TypeScript代码，分别获取对应模态框实例 #

替换原来的@ViewChild声明，改为分别获取两个模态框的引用，并在对应函数中操作：

import { IonModal, ViewChild } from '@ionic/angular';

// ...其他组件代码

@ViewChild('transactionModal') transactionModal: IonModal;
@ViewChild('accountModal') accountModal: IonModal;

cancel_transaction(){
  this.transactionModal.dismiss('cancel');
}

cancel_account() {
  this.accountModal.dismiss('cancel');
}

async confirm_transaction() {
  await this.transactionService.addTransactions(this.new_transaction)
  this.getTransactions()
  this.getAccounts();
  this.transactionModal.dismiss('confirm');
}

// 补充账户确认函数的实现（若未定义）
async confirm_account() {
  // 账户相关业务逻辑
  this.accountModal.dismiss('confirm');
}

为什么之前的@ViewChildren尝试无效？ #

@ViewChildren会返回所有匹配的IonModal实例列表，但如果没有正确识别并操作对应位置的实例（比如交易模态框是列表的第二个元素），就无法触发正确的关闭操作。相比之下，使用模板引用变量直接绑定对应模态框，逻辑更清晰，也更容易维护。

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