Ionic模态框 _Ionic模态框

本文概述

模态控制器
解散方法

Ionic中的模态显示为可滑入屏幕的临时UI。它出现在应用程序内容的顶部, 必须先被应用程序关闭, 然后才能继续进行交互。它主要用于登录/注册页面, 撰写消息, 过滤列表中的项目或提供应用程序配置选项。
模态控制器它负责在Ionic应用程序中创建模态。它使用create()方法创建模式。你可以通过在create方法中设置模式选项来自定义控制器。
解散方法创建模态后, 可以通过在模态控制器上调用dismiss()方法来消除它。在关闭模态之后, 可以调用onDidDismiss函数来执行其他操作。
让我们一步一步地了解模式控制器在Ionic应用程序中的工作方式。
步骤1：创建一个新项目。你可以从此处了解如何在Ionic 4中创建项目。
步骤2：为模态控制器创建一个新页面。为此, 请运行以下命令。

$ ionic g page modal

步骤3：创建模式页面后, 打开以下文件, 并插入给定的代码。你可以根据需要修改代码。
Modal.page.html
在这里, 我们将调用dismiss方法, 并添加显示在模式UI中的内容。

< ion-header> < ion-toolbar> < ion-title> Modal Content< /ion-title> < ion-icon name='close-circle' (click)='dismiss()' style='float: right; '> < /ion-icon> < /ion-toolbar> < /ion-header> < ion-content> < ion-list> < ion-item> < ion-avatar slot="start"> < img src="http://www.srcmini.com/assets/avatar.png"/> < /ion-avatar> < ion-label> < h2> Peter< /h2> < p> Hi! srcmini is a best Tutorial WebSite.< /p> < /ion-label> < /ion-item> < ion-item> < ion-avatar slot="start"> < img src="http://www.srcmini.com/assets/avatar.png"/> < /ion-avatar> < ion-label> < h2> Frodo< /h2> < p> Hi! This is a Great Ionic 4 Tutorial.< /p> < /ion-label> < /ion-item> < ion-item> < ion-avatar slot="start"> < img src="http://www.srcmini.com/assets/avatar.png"/> < /ion-avatar> < ion-label> < h2> Sam< /h2> < p> This is an example of Modal Controller.< /p> < /ion-label> < /ion-item> < /ion-list> < /ion-content>

模态页面
在此文件中, 我们必须创建一个dismiss方法来关闭模式UI。

import { Component, OnInit } from '@angular/core'; import { ModalController} from '@ionic/angular'; @Component({selector: 'app-modal', templateUrl: './modal.page.html', styleUrls: ['./modal.page.scss'], })export class ModalPage implements OnInit {constructor(public modalCtrl: ModalController) {}ngOnInit() {}dismiss() {this.modalCtrl.dismiss(); }}

Modal.module.ts

import { NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { Routes, RouterModule } from '@angular/router'; import { IonicModule } from '@ionic/angular'; import { ModalPage } from './modal.page'; const routes: Routes = [{path: '', component: ModalPage}]; @NgModule({imports: [CommonModule, FormsModule, IonicModule, RouterModule.forChild(routes)], declarations: [ModalPage]})export class ModalPageModule {}

步骤4：接下来, 配置app.module.ts文件。它负责在应用程序中输入模式页面。在这里, 你需要导入模式页面, 然后将其添加到@NgModule中。

import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { RouteReuseStrategy } from '@angular/router'; import { IonicModule, IonicRouteStrategy } from '@ionic/angular'; import { SplashScreen } from '@ionic-native/splash-screen/ngx'; import { StatusBar } from '@ionic-native/status-bar/ngx'; import { AppComponent } from './app.component'; import { AppRoutingModule } from './app-routing.module'; import { ModalPageModule } from './modal/modal.module'; @NgModule({declarations: [AppComponent], entryComponents: [], imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule, ModalPageModule], providers: [StatusBar, SplashScreen, { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }], bootstrap: [AppComponent]})export class AppModule {}

步骤5：打开home.page.ts文件并添加以下代码。在此文件中, showModal()函数用于创建模式控制器。在这里, 你还可以使用componentProps选项传递数据。

import { Component } from '@angular/core'; import { ModalController} from '@ionic/angular'; import { ModalPage } from '../modal/modal.page'; @Component({selector: 'app-home', templateUrl: 'home.page.html', styleUrls: ['home.page.scss'], })export class HomePage {constructor(public modalCtrl: ModalController) {}async showModal() {const modal = await this.modalCtrl.create({component: ModalPage}); return await modal.present(); }}

步骤6：打开home.page.html文件, 并添加以下代码。

< ion-header translucent> < ion-toolbar color="danger"> < ion-title> Ionic Modal< /ion-title> < /ion-toolbar> < /ion-header> < ion-content class="ion-padding" color="light"> < h1> Modal Controller< /h1> < ion-button color="primary" (click)="showModal()"> Show< /ion-button> < /ion-content>

步骤7：现在, 运行应用程序, 你将获得以下屏幕。