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();    // 關閉模態對話框
  }

}

結果：如下：