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() {
		//組件銷毀
	}
}