[英]how to close ion card modal?
modal.page.html modal.page.html
<ion-content>
<ion-button id="trigger-button">Click to open modal</ion-button>
<ion-modal trigger="trigger-button" [swipeToClose]="false" [presentingElement]="routerOutlet.nativeEl">
<ng-template>
<ion-content>
<ion-grid>
<ion-row class="">
<ion-col size="4" class="ion-float-left">
<ion-text color="primary"><h6 class="ion-no-margin fw-400">Cancel</h6></ion-text>
</ion-col>
<ion-col size="4" class="ion-text-center">
<ion-text><h6 class="ion-no-margin fw-500">Card Modal</h6></ion-text>
</ion-col>
<ion-col size="4" class="ion-text-end">
<ion-text color="muted"><h6 class="ion-no-margin fw-400">Done</h6></ion-text>
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
</ng-template>
</ion-modal>
</ion-content>
modal.page.ts modal.page.ts
import { Component, OnInit } from '@angular/core';
import { IonRouterOutlet, ModalController } from '@ionic/angular';
@Component({
selector: 'app-modal',
templateUrl: './modal.page.html',
styleUrls: ['./modal.page.scss'],
})
export class ModalPage implements OnInit {
constructor( public routerOutlet: IonRouterOutlet ) { }
ngOnInit() {
}
}
Modal is opening on click "Click to open modal" button.模态在单击“单击以打开模态”按钮时打开。 I want to close the modal on the " cancel " click.
我想在“取消”点击时关闭模式。
How dismiss ionic V6 card modal?如何解除 ionic V6 卡模态?
You need to import and declare the ModalController and use this.modalCtrl.dismiss()
to dismiss it.您需要导入并声明 ModalController 并使用
this.modalCtrl.dismiss()
将其关闭。
import { Component } from '@angular/core';
import { ModalController } from '@ionic/angular';
@Component({
selector: 'app-modal-example',
templateUrl: 'modal-example.component.html',
})
export class ModalExampleComponent {
name: string;
constructor(private modalCtrl: ModalController) {}
cancel() {
return this.modalCtrl.dismiss(null, 'cancel');
}
confirm() {
return this.modalCtrl.dismiss(this.name, 'confirm');
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.