Ionic 如何关闭离子卡模式？

des4xlb0 于 2022-12-08 发布在 Ionic

关注(0)|答案(1)|浏览(228)

模式页面.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>

模态.页面.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() {
  }

}

打开模态后点击“Click to open modal”按钮.要关闭模态请点击“cancel”。
如何解除离子V6卡模态？

ionic-framework

来源：https://stackoverflow.com/questions/71965415/how-to-close-ion-card-modal

1条答案

按热度按时间

yfwxisqw1#

您需要导入并声明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');
  }
}

赞(0）回复(0）举报 2022-12-08

我来回答

Ionic 如何关闭离子卡模式？

1条答案

相关问题

热门标签

最新问答