首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

使用Angular关闭Modal - Ionic 4

在Ionic 4中,使用Angular关闭Modal有几种方法。

方法1:使用dismiss()方法关闭Modal 在打开Modal时,可以通过ModalController的create()方法创建一个Modal实例,并通过present()方法将其显示出来。要关闭Modal,可以在Modal实例上调用dismiss()方法。

代码语言:txt
复制
import { ModalController } from '@ionic/angular';

constructor(private modalController: ModalController) {}

async openModal() {
  const modal = await this.modalController.create({
    component: MyModalComponent
  });
  await modal.present();
}

closeModal() {
  this.modalController.dismiss();
}

方法2:使用dismiss()方法传递数据关闭Modal 如果需要在关闭Modal时传递一些数据给父页面,可以在dismiss()方法中传递一个参数。

代码语言:txt
复制
closeModal() {
  this.modalController.dismiss({
    data: 'Some data'
  });
}

在父页面中,可以通过onDidDismiss()方法来获取传递的数据。

代码语言:txt
复制
async openModal() {
  const modal = await this.modalController.create({
    component: MyModalComponent
  });
  modal.onDidDismiss().then((data) => {
    console.log(data);
  });
  await modal.present();
}

方法3:使用dismiss()方法关闭带有返回值的Modal 如果需要在关闭Modal时返回一些数据给父页面,可以在dismiss()方法中传递一个参数。

代码语言:txt
复制
closeModal() {
  this.modalController.dismiss({
    data: 'Some data'
  });
}

在父页面中,可以通过onWillDismiss()方法来获取返回的数据。

代码语言:txt
复制
async openModal() {
  const modal = await this.modalController.create({
    component: MyModalComponent
  });
  modal.onWillDismiss().then((data) => {
    console.log(data);
  });
  await modal.present();
}

以上是使用Angular关闭Modal的几种方法。在Ionic 4中,ModalController是一个重要的组件,可以方便地创建和管理Modal。更多关于ModalController的信息和使用方法,可以参考腾讯云的Ionic文档:ModalController - Ionic 4

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

ionic4 -- angular 跳转页面

1、引入route并新建页面: ionic4 与前辈们最大的不同就是通过angular引入了route,这样每次跳转的时候只需要直接跳转对应的路由地址就可以了,给了路由器上的解耦,也解决了原来的RXjs...routeload.png 源码阶段直接使用rxjs监听load跳转分配路由,通过导入父路由或者根路由自带的注解和路由本身来完成类加载。ionic4在这里直接使用的是angular的源码。...新建页面: 通过在cmd上输入 ionic g 我们进入一串选项: ? 选择新建项目.png 然后选择page: ?...ion-button block href="/detail">进入页面 那么我们就可以在点击此button过后即可跳转到刚才建立的detail页面去了 3、自定义跳转 怀旧时期的ionic...: NavigationExtras): Promise; 使用这三个方法,可以直接进入我们想跳转进入的页面,于是我们进入页面: /////////////////////////

2.8K20

Ionic4Ionic3部分比较

有较长时间没有用Ionic了,见新的公众号需求比较简单,便决定使用Ionic4来实现。...其实,Ionic2和Ionic3的差别不大,而ionic4则变化比较大了,它支持angular、vue、react或其它任意js框架,甚至不使用js框架,它更像一个纯粹UI库。...一、项目差异 那现在来看看怎么用ionic4,首先,我们还是以传统的angular使用之: ionic start [options] 而示例命令有: ionic...>变为,所以对于ionic4的组件使用,还是建议先上官网了解组件的api,特别留意下xxx-controller的变更,常见的有如下几个: modal-controller popover-controller...在ionic4中已经没有这个方法,改为通过监听事件或回调给外面的xxx-controller来关闭

6.9K10

ionic监听android返回键实现“再按一次退出”功能

1、这个功能需要我们用到ionic提供的registerBackButtonAction方法(注册硬件后退按钮动作) registerBackButtonAction(callback, priority...= 150 关闭模版modal = 200 关闭上拉菜单action sheet = 300 关闭对话框popup = 400 关闭加载框loading = 500 注意:返回: function...例如:如果一个上拉菜单已经显示,后退按钮应该关闭上拉菜单,而不是返回一个页面视图或关闭一个打开的模型。...所以我们要实现“再按一次退出app”的功能,可以将优先级priority设为101 2、代码实现 在js中 angular.module("app").run(["$rootScope", "$ionicPlatform...window.plugins.toast.showShortCenter("在按一次退出app"); // toast是cordova的一个插件cordova-plugin-x-toast,也可以用ionic

1.8K20

【组件篇】ionic3均分列等宽高图像显示(上)

我在《ionic3开源组件》提到了图片选择组件,但是后来发现其实现功能很简单,而且我不喜欢它写死了宽高大小,这对于不同分别率不太友好。于是尝试实现了一下,先上效果图: ?.../core'; import { IonicPage, ModalController, NavParams } from 'ionic-angular'; export interface IImageObj...' }) export class ImageSelectorComponent { @Input() max: number = 9; //最多可选择多少张图片,默认为4张 @Input...//以下代码自行调整 let imgCopies = JSON.parse(JSON.stringify(this.images)); //复制对象,以免内部修改了对象 let modal...重要的方法是ngAfterViewChecked,用于在内部调整图像高度,为什么用该方法,先了解下angular组件的生命周期。

77250

【组件篇】ionic3开源组件

平时会留意一些开源组件,收藏到收藏夹里,然后一天mac电脑因为卸载window出问题导致不能不重装,然后里面的东西都没了,特别是适用于ionic2布局的angular2和普通js……so sad,现整理回一些并分享下...提醒一点,ionic3除了很方便使用ionic2及以上组件外,也很方便引入angular2或普通js的组件。这里列的基本都是ionic2,如果没有,可以自行找angular2或js的。...ionic2-datepicker easy-ionic2-calendar 滑动选项卡 ionic2-super-tabs Ionic2-ScrollableTabs ionic3-swipetabs-segment...评分 视频播放 videogular2 图表 ng2-charts 强制更新 ionic-manup 图像浏览 ionic-img-viewer ionic-gallery-modal ImagePicker...ionic2Accordion 聊天 ionic3-chat ionic3chat ?

1.8K40

【开发指南】(三)认识ionic3

Hybird应用Cordova技术,它只提供了使用JavaScript调用Native功能,在开发的时候还需要开发人员自己去实现诸如样式美化、页面切换、数据展示、弹出框、Modal窗体、日期选择器等功能或组件...而路由、网络模块、指令、管道、服务等属于angular的技术范畴。 Ionic1基于Angular1开发。...等到angular2的更新到了一定版本,一些依赖库分属于2和3,为了便于版本的统一管理,直接跳到了angular4,其实angualr2和4两者的变化不算太多。相应的ionic2也同步升级到3。...angular4更新来查看。...@IonicPage装饰器 ionic2中导航器不是基于url的,如果想使用url访问就要通过DeepLinker来实现,这是比较麻烦的,而在新版本中可以通过@IonicPage装饰器来实现。

2.7K40

【组件篇】ionic3图像手指缩放滑动预览

这段时间没有做ionic相关的事,但看到群里有人问这个,写一下。 我在一篇文章【组件篇】ionic3开源组件提到过图像预览组件,可以看里面的源码,也可以看下面内容。...思路 首先,这种图像滑动缩放的一般是个整体页面,可以是普通的page,也可以用modal来弹出,为支持这两种方式也适用于懒加载,所以建议不做成组件,而是做成懒加载页面。...其次,实现这个功能其实也是很简单的,正常这个功能用ionic自带的slides即可,它有zoom属性,不过我那时用有bug,所以也是拿万能的swiper来代替,所以先在index.html里添加: image-viewer.scss:不需要; image-viewer.ts: import { Component, ViewChild, ElementRef } from '@angular.../core'; import { IonicPage, NavController, NavParams, ViewController, AlertController } from 'ionic-angular

1.5K30

使用Ionic2开发Todo应用0 开始之前1 创建新的Ionic 2工程2. 设置主页(Home page)3 持久化数据保存4 总结

所以,如果我们的items数组(稍后将定义在类定义)有4项,那么将渲染四次。还要注意,我们使用的** let item ,循环分配一个items数组项给item**。...} from 'ionic-angular'; import { MyApp } from '....除此之外,我们创建了saveItem函数来创建newItem对象,它使用当前的标题和描述值(即我们建立双向数据绑定,无论用户输入什么),然后我们关闭视图,同时我们也传入了newItem在dismiss方法中...我们将使用Ionic 2提供的Stroage服务来帮助我们做到这一点。Stroage服务是Ionic 2的通用存储服务,它负责存储数据的最佳方式,同时提供了一致的API供我们使用。...4 总结 在本教程中我们已经介绍了如何实现很多Ionic 2应用的常用功能: 创建视图 监听和处理事件 视图之间的导航 在视图之间传递数据 建立双向数据绑定 保存数据 显然还有很多我们可以做,使这个应用程序更漂亮

6.1K50
领券