我得出的结论是，对于这种情况，有必要使用离子ModalController而不是ion-modal。
这是正在工作的Stackblitz demo。
app.component.ts注入ModalController服务并创建用于呈现模态的方法：

...
export class AppComponent {
  name: string = '';

  constructor(private modalCtrl: ModalController) {}

  async openModal() {
    const modal = await this.modalCtrl.create({
      component: CustomComponent,
    });
    modal.present();

    const { data, role } = await modal.onWillDismiss();

    if (role === 'confirm') {
      this.name = data;
    }
  }
}

app.component.html将click事件分配给方法：

<ion-app>
  <ion-content>
    <ion-list>
      <ion-item [button]="true" (click)="openModal()">
        <ion-label>ControllerModal Modal</ion-label>
      </ion-item>
    </ion-list>
    <h1>Hello {{ name }}</h1>
  </ion-content>
</ion-app>

custom.component.ts创建将插入模态的组件;它还注入ModalController，以便可以解除：

...
export class CustomComponent implements OnInit {
  name: string;

  constructor(private modalCtrl: ModalController) {}

  ngOnInit() {}

  cancel() {
    this.modalCtrl.dismiss(null, 'cancel');
  }

  confirm() {
    this.modalCtrl.dismiss(this.name, 'confirm');
  }
}

custom.component.html只是一个简单的表单，有两个按钮：

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-button color="medium" (click)="cancel()">Cancel</ion-button>
    </ion-buttons>
    <ion-title>Welcome</ion-title>
    <ion-buttons slot="end">
      <ion-button (click)="confirm()">Confirm</ion-button>
    </ion-buttons>
  </ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
  <ion-item>
    <ion-label position="stacked">Your name</ion-label>
    <ion-input [(ngModel)]="name" placeholder="Your name"></ion-input>
  </ion-item>
</ion-content>