ionic4 ion-modal的用法

组件内部示例

<ion-header>
  <ion-toolbar>
    <ion-title>条件筛选</ion-title>
		<ion-buttons slot="end">
		   <ion-button (click)="cancel()">
		      <ion-icon name="close"></ion-icon>
		   </ion-button>
		</ion-buttons>
  </ion-toolbar>
</ion-header>
<ion-content class="searchfiltrate">
	<div class="box_01-list">
		<div class="box_01">
			<h4 class="box_tp">主題</h4>
			<ol class="box_bt">
				<li class="l0_ active">全部主題</li><li class="l0_">跨領域設計</li><li class="l0_">傳統工藝</li><li class="l0_">創意產品設計</li>
			</ol>
		</div>
		<div class="box_01">
			<h4 class="box_tp">年級</h4>
			<ol class="box_bt">
				<li class="l0_ active">全部年級</li><li class="l0_">一年級</li><li class="l0_">二年級</li><li class="l0_">三年級</li>
				<li class="l0_">四年級</li><li class="l0_">五年級</li><li class="l0_">六年級</li><li class="l0_">七年級</li>
				<li class="l0_">八年級</li><li class="l0_">九年級</li><li class="l0_">高一</li><li class="l0_">高二</li>
				<li class="l0_">高三</li>
			</ol>
		</div>
		<div class="box_01">
			<h4 class="box_tp">收費情況</h4>
			<ol class="box_bt">
				<li class="l0_ active">全部</li><li class="l0_">免費</li><li class="l0_">收費</li>
			</ol>
		</div>
	</div>
	<div class="btn_box">
		<span class="btn_">清空筛选</span>
		<span class="btn_ sure-btn" (click)="ok()">确定</span>
	</div>
</ion-content>

import { Component, OnInit } from '@angular/core';
import { ModalController, NavParams } from '@ionic/angular';

@Component({
	selector: 'app-searchmodal',
	templateUrl: './searchmodal.page.html',
	styleUrls: ['./searchmodal.page.scss']
})
export class SearchmodalPage implements OnInit {
	public searchfiltrate = ['000'];
	constructor(public modalController: ModalController,public navParams: NavParams) {
		//this.navParams 通过这个获取父页面的传值
		console.log(this.navParams);
	}

	ngOnInit() {}
	cancel() {//取消
		this.modalController.dismiss({
			result: 'modal_cancel'
		});
	}
	ok() {//确定
		this.modalController.dismiss({
			result: this.searchfiltrate
		});
	}
}

　　调用示例：

import { Component, ViewChild } from '@angular/core';
import { IonInfiniteScroll, ModalController } from '@ionic/angular';
import { Router } from '@angular/router';
import { SearchmodalPage } from '../module/searchmodal/searchmodal.page';

@Component({
	selector: 'app-tab1',
	templateUrl: 'tab1.page.html',
	styleUrls: ['tab1.page.scss']
})
export class Tab1Page {
	@ViewChild(IonInfiniteScroll) infiniteScroll: IonInfiniteScroll;
	public list = [];
	public total = 30; //总条数
	public pageindex = 0; //页数
	public pageSize = 10; //每页条数
	public hasMore = false; //是否显示更多数据
	public searchobj = {roleText:null,subjectText:null}
	constructor(public router: Router, public modalController: ModalController) {}
	ngOnInit(): void {
		this.getData(this.pageindex); //页面初始化的时候加载数据
	}
	searchchange(msg){ //接收子组件的搜索参数
		console.log(msg)
	}
	searchfiltrate(msg){ //子组件传递参数执行父组件的方法
		console.log(msg)
		if(msg)this.presentModal();
	}
	async presentModal() {
		const modal = await this.modalController.create({
			showBackdrop:true,
			component: SearchmodalPage,
			componentProps: { value: 123 }
		});
		await modal.present();
	   //监听销毁的事件
	   const { modalData } = await modal.onDidDismiss(); //获取关闭传回的值
	   console.log(modalData);
	}
	doRefresh(event) { //下拉刷新
		this.pageindex = 0;
		setTimeout(() => {
			this.list = [];
			for (let i = 0; i < (this.pageindex + 1) * this.pageSize; i++) {
				this.list.push(i);
			}
			event.target.complete();
			this.hasMore = false;
		}, 500);
	}
	loadData(event) {
		//加载更多数据
		setTimeout(() => {
			this.pageindex = this.pageindex + 1;
			this.getData(event); //加载更多数据
			this.infiniteScroll.complete();
		}, 500);
	}
	getData(event) {
		//加载更多数据
		let start = this.pageindex * this.pageSize;
		let end = (this.pageindex + 1) * this.pageSize;
		if (end > this.total) {
			end = this.total;
		}
		for (let i = start; i < end; i++) {
			this.list.push(i);
		}
		if (this.list.length == this.total) {
			this.hasMore = true;
			//this.infiniteScroll.disabled = true;
		}
	}
	todetails(obj) {
		this.router.navigate(['/details'], { queryParams: obj });
	}
	ngOnDestroy() {
		//组件销毁
	}
}