ionic4Modal--底部支付弹框

第一步：建立一个component组件

注意：最好建立在需要弹框的底部或者同一个目录下

// 切换到我们的目录下
cd src/app/home-main/sidebar/e-shop
// 创建一个component类型的name组件，name可以穿换成自己需要的名字：cartridge-frame
ionic g c name

第二步：在我们需要弹框的页面创建此组件

import { CartridgeFrameComponent } from '../cartridge-frame/cartridge-frame.component';
import { ModalController } from '@ionic/angular';

  constructor(
    public modalController: ModalController,
  ) {}

// 此方法为掉取出模态框，其中item,cll为html界面传过来的值
 async showModel(item, cll) {
    const modal = await this.modalController.create({
      // showBackdrop: false,
      component: CartridgeFrameComponent,
      componentProps: {          // 向模态窗体传值
        studentID: item, // 将item值传过去弹框
        userName: cll,
        listScreenPicture: 20
      }
    });
    await modal.present();
    // 监听销毁的事件，此时data存的是模态窗口页面销毁时候的值
    const { data } = await modal.onDidDismiss();
    console.log(data);
  }

第三步：我们需要在新建立的组件modal里面引入我们刚才建立的

import { IonicStorageModule } from '@ionic/storage';
import { CartridgeFrameComponent } from '../cartridge-frame/

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes),
    IonicStorageModule.forRoot(),
    IonicModule.forRoot({
      mode: 'ios',
    })
  ],
  declarations: [ExchangePointsPage, CartridgeFrameComponent],
  entryComponents: [CartridgeFrameComponent]
})

第四步：我们进入我们建立的组件开始画页面即可

<div >
    <header style="font-size: 150%; text-align: center">
        确认兑换
    </header>
    
    <div style="font-size: 200%; text-align:center;margin-top: 20%">
        ¥  {{studentID}}
    </div>
    
    <div style="margin-top: 5%;margin-left:5%;text-align: center;">
      订单信息：您要兑换{{userName}}个积分
    </div>



<ion-button style="width: 30%;height:18%;" class="CancelButton" color="rgba(61, 154, 185, 1)" (click)="doClose()">取消</ion-button>



<ion-button style="width: 30%; height:18%;" class="OkButton" color="rgba(61, 154, 185, 1)" size="default" >确认兑换</ion-button>



</div>

// 穿透ionic给的样式，强制用此，让页面只有50%大小
/deep/ .sc-ion-modal-md-h {
  --height: 50%;
}
/deep/ .sc-ion-modal-md-h {
  align-items: flex-end; // 设置元素位于底部。
}

.CancelButton {
  background-color: rgba(61, 154, 185, 1);
  float: left;
  margin-left: 14%;
  margin-top: 18%;
//   width: ;
}

.OkButton {
  background-color: rgba(61, 154, 185, 1);
  float: right;
  margin-right: 14%;
  margin-top: 18%;
}

import { Component, OnInit } from '@angular/core';
// 接受prientscreencheck页面传过来的值
import { NavParams } from '@ionic/angular';
import { InterceptorService } from 'src/app/shared/providers/interceptor.service';

@Component({
  selector: 'app-cartridge-frame',
  templateUrl: './cartridge-frame.component.html',
  styleUrls: ['./cartridge-frame.component.scss']
})
export class CartridgeFrameComponent implements OnInit {

  // 不通过学生的id
  public studentID;

  // 不通过学生的名字
  public userName;

  constructor(
    public navParams: NavParams,
    public http: InterceptorService,
  ) {
    this.studentID = this.navParams.data.studentID;
    this.userName = this.navParams.data.userName;

  }

  ngOnInit() {
  }

  // 关闭模态对话框
  doClose() {
    this.navParams.data.modal.dismiss({
      result: {
        'msg': '兑换成功'
      }
    });
  }

  UpdateMistakeInfo() {
    this.navParams.data.modal.dimiss();    // 关闭模态对话框
  }

}

结果：如下：