为什么在使用多个 Ionic 模态时无法关闭 Ionic 模态？ （有角度的）

Question

我正在使用 Ionic 构建一个 Angular 应用程序。 该应用程序的目标是跟踪您的开支，并能够了解您在每个不同账户上有多少钱。 我正在使用 ion-fab-list 来显示用于添加交易和添加新银行帐户的不同按钮。 这些按钮打开不同的离子模式。 我已经获得了添加新事务的模式。 但是，当我尝试添加用于添加新帐户的那个时，我再也无法关闭另一个模式了。

这是 HTML（添加交易的模式不完整，因为它很长，之后的任何事情都不会导致问题）

      <ion-fab horizontal="end" vertical="bottom" slot="fixed">

        <ion-fab-button color="primary" class="">
          <ion-icon name="add"></ion-icon>
        </ion-fab-button>

        <ion-fab-list side="top">

          <ion-fab-button id="add-transaction" expand="block" color="primary" data-desc="Add transaction">
            <ion-icon name="receipt-outline"></ion-icon>
          </ion-fab-button>

          <ion-fab-button id="add-account" expand="block" color="primary" data-desc="Add account">
            <ion-icon name="card-outline"></ion-icon>
          </ion-fab-button>

        </ion-fab-list>
      </ion-fab>

      <ion-modal trigger="add-account">
        <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">
        <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">

这是 Typescript（忽略确认交易 function 的前 4 行，因为它只与将新交易发送到数据库有关。）

  @ViewChild(IonModal) modal: IonModal;

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

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

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

我已经尝试将 @ViewChild 更改为 @ViewChildren，因为我看到有人在类似问题中提出建议，但它仍然无效。 此外，之所以有两个相同的函数用于关闭模态，是因为我认为对两个模态使用相同的 function 可能是导致此问题的原因，但问题仍然存在。 每当我尝试关闭用于添加事务的模式时，它就不起作用。

Answer 1

每个模式都需要自己的角色 (id)，然后将其传递给 dismiss 方法。 像这样：

this.modal.dismiss('confirm', 'modal1');

https://ionicframework.com/docs/api/modal#dismiss