Angular/Ionic：未在父组件HTML引入模态框，如何从子组件关闭？

方案1：在模态组件中直接使用ModalController关闭自身（推荐） #

这种方式最直接，模态组件本身由ModalController创建，只需在组件内注入该服务，响应子组件事件即可触发关闭。

修改模态组件TS：

import { Component, OnInit, Input } from '@angular/core';
import { ModalController } from '@ionic/angular';

export class ModalGenericPutComponent implements OnInit {
  @Input() tableName: string;
  @Input() schemaName: string;
  @Input() id: any;
  @Input() formData: any;

  valueEmittedFromChildComponent = '';

  constructor(private modalCtrl: ModalController) {}

  ngOnInit() {}

  parentEventHandlerFunction(valueEmitted){
    this.valueEmittedFromChildComponent = valueEmitted;
    // 匹配子组件传来的关闭指令，触发模态框关闭
    if(valueEmitted === 'CLOSE_PARENT_MODAL'){
      this.modalCtrl.dismiss();
    }
  }
}

修改模态组件HTML的Cancel按钮：

<ion-content>
  <app-json-form-update 
    [jsonFormData]="formData" 
    [tableName]="tableName" 
    [schemaName]="schemaName" 
    [id]="id" 
    (buttonClicked)="parentEventHandlerFunction($event)">
  </app-json-form-update>
  <ion-button expand="block" color="danger" (click)="modalCtrl.dismiss()">Cancel</ion-button>
</ion-content>
{{valueEmittedFromChildComponent}}

方案2：通过事件传递让父组件关闭模态框 #

如果需要父组件在模态关闭时执行额外逻辑，可以通过自定义事件通知父组件触发关闭。

修改模态组件TS：

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';

export class ModalGenericPutComponent implements OnInit {
  @Input() tableName: string;
  @Input() schemaName: string;
  @Input() id: any;
  @Input() formData: any;
  @Output() closeModal = new EventEmitter<void>();

  valueEmittedFromChildComponent = '';

  ngOnInit() {}

  parentEventHandlerFunction(valueEmitted){
    this.valueEmittedFromChildComponent = valueEmitted;
    if(valueEmitted === 'CLOSE_PARENT_MODAL'){
      this.closeModal.emit();
    }
  }
}

修改父组件TS：

async openUpdateModal(value: any) {
  console.log(this.columns);
  const modal = await this.modalCtrl.create({
    component: ModalGenericPutComponent,
    componentProps: {
      tableName: this.tableName,
      schemaName: this.schemaName,
      columns: this.columns,
      id: value.id,
    }
  });

  // 监听模态关闭后的回调
  modal.onDidDismiss().then(() => {
    // 这里可以添加模态关闭后的额外处理逻辑
  });

  // 监听模态组件的自定义关闭事件
  const modalInstance = modal.componentInstance;
  modalInstance.closeModal.subscribe(() => {
    modal.dismiss();
  });

  return await modal.present();
}

关键说明 #

• 无需在父组件HTML中引入模态组件，因为模态框是通过ModalController动态创建的，组件实例由Ionic框架管理。
• 子组件仅需向直接父组件（模态组件）传递事件，再由模态组件处理关闭逻辑，或向上传递给顶层父组件执行操作。

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