[ionic4] 模态对话框的深入理解以及Modal之间传值

前言:

说实话,在搞ionic的时候,还真的应该简单的angular的帮助,要不然感觉理解期间的含义还真是有点难度的,不知道你们是不是,反正这篇博客做了一段ionic项目后,才写出来!

一.什么时候该用模态对话框

Modal(模态)对话框,是指用户想要对对话框以外的应用程序进行操作时,必须首先对该对话框进行响应.如单机确定或者取消按钮才能将对话框关闭!如下图就是一个模态对话框,点击取消或者确认并提醒按钮,就会关闭当前页面!回到你要操作的页面,它是从页面底部弹出的,如果是普通的页面跳转是左右转换的!

二.建立模态对话框的过程

1.新建立一个页面prientscreencheck, 此时在这个页面我们演示模态对话框

2.在本页面创建一个组件

ionic  g  component prientscreencheck/components/mistakeinfo

效果图:此时mistakeinfo是一个组件,我们的页面prientscreencheck要引用这个组件

3.在prientscreencheck.module.ts中引入mistakeinfo 组件,并且声明

    import { MistakeinfoComponent } from './components/mistakeinfo/mistakeinfo.component';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    RouterModule.forChild(routes),

  ],
  declarations: [PrientscreencheckPage,MistakeinfoComponent],
  entryComponents:[MistakeinfoComponent]   //模态对话框要用到
})

4.在prientscreencheck.page页面中引入刚才创建的Mistakeinfo组件，并且引入ModalController 弹出模态对话框， 代码如下

import { Component, OnInit, ViewChild } from '@angular/core';
import { ModalController } from '@ionic/angular';
import { InterceptorService } from '../../../shared/providers/interceptor.service';

//mistakeinfo组件
import { MistakeinfoComponent } from './components/mistakeinfo/mistakeinfo.component';

@Component({
  selector: 'app-prientscreencheck',
  templateUrl: './prientscreencheck.page.html',
  styleUrls: ['./prientscreencheck.page.scss'],
})

export class PrientscreencheckPage implements OnInit {
  @ViewChild('slideMainContent') slideMainContent;
  constructor(
    public modalController: ModalController,
    public CommonService: InterceptorService
  ) { }

  public listStuInfo: any = [];
  public list: any = [];
  public listScreenPicture: any = [];

  ngOnInit() {
    for (let i = 0; i < 10; i++) {
      this.list.push(i);
    }
    this.getStudentInfo();
  }

//创建了模态对话框
  async showModel(item) {
    const modal = await this.modalController.create({
      component: MistakeinfoComponent,
      componentProps: {          //向模态窗体传值
        studentID:item.studentID,
        userName:item.userName,
        listScreenPicture:item.listPicURL 
       }   
    });
    await modal.present();
    //监听销毁的事件，此时data存的是模态窗口页面销毁时候的值
    const{data}=await modal.onDidDismiss();
    console.log(data);
  }

三.模态对话框的传值

import { Component, OnInit } from '@angular/core';
import { InterceptorService } from '../../../../../shared/providers/interceptor.service';  //请求

// 接受prientscreencheck页面传过来的值
import { NavParams } from '@ionic/angular';

@Component({
  selector: 'app-mistakeinfo',
  templateUrl: './mistakeinfo.component.html',
  styleUrls: ['./mistakeinfo.component.scss'],
})


export class MistakeinfoComponent implements OnInit {
  //不通过学生的id
  public studentID;

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

  //操作人id
  public operator;

  //学生缴费截图
  public pictureUrl;

  //照片不通过的备注信息
  public remark;

  //不通过的时候返回给后端的信息
  MistakeInfo = {
    remark: '',
    operator: '',
    checkState: 0,
    studentID:''
  };


  //接收prientscreencheck页面传过来的参数
  constructor(public navParams: NavParams,
    public http:InterceptorService,) {
    this.studentID = this.navParams.data.studentID;
    this.userName = this.navParams.data.userName;
    this.operator = localStorage.getItem('userName'); //从缓存获取的操作人用户名
    this.pictureUrl = this.navParams.data.listScreenPicture;
  }

  ngOnInit() { }

  //关闭模态对话框
  doClose() {
    this.navParams.data.modal.dismiss({
      result: {
        'msg': '消失的时候返回的内容'
      }
    });
  }

  //更新学生截图错误的信息
  UpdateMistakeInfo() {
    this.MistakeInfo.remark = this.remark;
    console.log(this.MistakeInfo.remark);
    this.MistakeInfo.operator=localStorage.getItem('userName');
    this.MistakeInfo.checkState=3;
   this.MistakeInfo.studentID=this.studentID;

    const body=JSON.stringify(this.MistakeInfo);
    const api='NO1System/no.1/ScreenCheckController/UpdateRemarkById';
    this.http.post(api,body).subscribe();
    this.navParams.data.modal.dimiss();    //关闭模态对话框
  }
}

后记：

模态对话框很好用，还是多看官网。模态对话框是组件，引用模态对话框的时候需要在本页面的module.ts，page.ts下面引用相应的模态组件。