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="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="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="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：现在, 运行应用程序, 你将获得以下屏幕。

在以上屏幕中, 单击“显示”按钮, 浏览器中将显示以下屏幕。在这里, 你可以将模式页面的内容视为临时UI。单击关闭图标可以将其关闭。