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

如何在Ionic中从模式视图发回参数

在Ionic中,可以通过使用路由参数来从模态视图返回参数。以下是一种实现方法:

  1. 首先,在打开模态视图时,传递参数给模态视图的组件。可以使用Ionic的ModalController服务的create方法来创建模态视图,并通过传递参数给create方法的第一个参数来传递参数。例如:
代码语言:typescript
复制
async openModal() {
  const modal = await this.modalController.create({
    component: ModalPage,
    componentProps: {
      param: 'Hello from parent page'
    }
  });
  await modal.present();
}
  1. 在模态视图的组件中,接收传递的参数。可以通过NavParams服务来获取传递的参数。在构造函数中注入NavParams,并使用get方法来获取参数。例如:
代码语言:typescript
复制
import { NavParams } from '@ionic/angular';

constructor(private navParams: NavParams) {}

ngOnInit() {
  const param = this.navParams.get('param');
  console.log(param); // 输出 'Hello from parent page'
}
  1. 在模态视图中,当需要返回参数给父页面时,可以使用ModalController的dismiss方法。在dismiss方法的参数中传递需要返回的参数。例如:
代码语言:typescript
复制
returnData() {
  const data = {
    result: 'Data from modal'
  };
  this.modalController.dismiss(data);
}
  1. 在父页面中,可以通过监听模态视图的dismiss事件来获取返回的参数。在打开模态视图时,使用await关键字来等待模态视图关闭,并使用then方法来获取返回的参数。例如:
代码语言:typescript
复制
async openModal() {
  const modal = await this.modalController.create({
    component: ModalPage,
    componentProps: {
      param: 'Hello from parent page'
    }
  });
  await modal.present();

  modal.onDidDismiss().then((data) => {
    console.log(data); // 输出 { data: { result: 'Data from modal' }, role: 'backdrop' }
    console.log(data.data.result); // 输出 'Data from modal'
  });
}

通过以上步骤,你可以在Ionic中从模态视图返回参数。请注意,以上示例中的ModalPage是模态视图的组件名称,你需要根据实际情况进行替换。

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

相关·内容

ionic3应该善用组件和指令

g directive 指令名 ionic g component 组件名 要说指令和组件的区别,简单说是不带视图和带视图的区别,直观效果是:一个为原有标签动态添加功能,另一个为新建自定义功能标签,详细上有不少细节上的不同...其实就是模版指令,ngIf,当条件为true时,该元素会被添加到DOM。其主要依赖TemplateRef和ViewContainerRef来完成操作。...TemplateRef用来访问组件的模板,而ViewContainerRef可作为视图内容渲染器,将模板内容插入至DOM。 组件 这个不必说了,我们用得最多的便是组件。...与其他指令不同,它描述的是一个视图,是用户可以直接看到的东西。 自定义属性指令 实例:创建一个bgColor属性指令,支持传入颜色名参数,设置目标标签的背景色 1)创建指令。...为实现该指令,要借用TemplateRef和ViewContainerRef,TemplateRef用来访问组件的模板,而ViewContainerRef可作为视图内容渲染器,将模板内容插入至DOM

3.5K40

Spring Boot 之 MVC1、新建工程2、依赖更新3、编写Controller4、准备Model数据,映射请求路径5、配置JSP模版6、渲染输出

4、准备Model数据,映射请求路径 我们现在application.propeties准备点数据,当然这个数据你可以数据库取也行: application.message=Hello JSP Template...在映射方法通过Map来传递Model,最后通过“welcome”视图来渲染。由于application.message2没有值,所以会使用默认值Hello World2。...插件 Ionic 和 Cordova 的误解 使用Ionic Native 使用没有包含在Ionic Native的插件 Ionic 2 添加图表 1....progress-bar/progress-bar.ts如下: 3.使用这个组件 总结 使用VS Code在Chrome调试Ionic 2 优化你的Ionic2应用 打开Angular产品模式...修改(click) 为 (tap) 使用 --prod 参数编译 总结 Ionic 2 开发遇到的问题及处理集 Console.log 不输出 编译Android报错:compileArmv7DebugJavaWithJavac

2.8K50

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

现在,只有一个HomePage组件,设置一个虚拟视图。在我们的应用程序我们要修改这个来显示的所有待办事项列表。...改变Ionic 2应用程序视图可以通过改变这一根页面,或** push ** 推或 pop弹出视图。推一个视图将会改变展现,弹出它将删除当前视图并回到前面的视图。...现在我们在构造函数中分配一个NavController类型给navCtrl参数。...这就是Ionic 2 的依赖注入工作模式,基本上是一种方式告诉应用程序“我们希望通过navCtrl引用到NavController”。通过添加公共关键字在它面前,它会自动创建一个成员变量。...4 总结 在本教程我们已经介绍了如何实现很多Ionic 2应用的常用功能: 创建视图 监听和处理事件 视图之间的导航 在视图之间传递数据 建立双向数据绑定 保存数据 显然还有很多我们可以做,使这个应用程序更漂亮

6.1K50

Hybrid app(二)----开发主要应用技术

在上一篇 Hybird App(一)—-第一次接触 文章,详细的介绍了现阶段手机APP的三大类,而Hybrid app结合Web app和Native app的优点,脱颖而出,变得越来越流行。...下面就说说在开发过程我们主要应用到的技术。...配合上一些基于HTML5、CSS3技术的UI框架, jQueryMobile、DojoMobile或SenchaTouch,开发者得以快速地开发跨平台App而不需要编写任何的原生代码。...[1]框架 采用并扩展了传统HTML,通过双向的数据绑定来适应动态内容,双向的数据绑定允许模型和视图之间的自动同步。因此,AngularJS使得对DOM的操 作不再重要并提升了可测试性。...指导开发者完成构建应用程序的整个历程:用户界面的设计,到编写业务逻辑,再到测试。 Angular 遵循软件工程的MVC模式,并鼓励展现,数据,和逻辑组件之间的松耦合。

3.6K10

ionic之AngularJS扩展2 移动开发

使用$templateCache服务 也可以直接使用$templateCache服务的方法get()模板缓存读出 其内容: var partial = $templateCache.get("a.html..."); 使用$http服务 还有一种常见的用法是使用$http服务时指定cache参数,这将直接$templateCache 取出模板,而不必进行网络访问: $http.get("a.html",{...导航视图 : ion-nav-view 在ionic里,我们使用ion-nav-view指令代替AngularUI Route的 ui-view指令,来进行模板的渲染: <...模板视图 : ion-view 尽管在模板视图中可以随便写HTML,但是,在ionic,我们总是使用指令ion-view来 作为模板视图内容的容器,这是为了与ionic的导航框架保持兼容: 当视图切换时,回退按钮会自动出现在导航条,并显示前一个视图 的标题。

3.5K20

Ionic 2 :如何实现列表滑动删除按钮1.创建Ionic2应用2.准备列表数据3.修改主页(HOME)的模版4.创建方法删除数据5.添加一个编辑按钮总结

使用Ionic这种框架伟大的地方在于用户界面元素默认准备好了,意味着你可以设计更好的app而不需要很强的用户体检设计背景,而且让你可以更容易实现这些模式。...这篇教程将展示如何使用Ionic2添加一个简单的删除按钮到列表,当用户滑动列表项到左边的时候。这是一个处理删除列表数据时候常用的模式。本教程将涵盖创建这个滑动删除按钮所需要的一切。 ?...你可能已经注意到我们已经给这个组件定义了模版,随后将展示如何在模版中使用在这里添加的数据。...因此我们设置一个简单监听以便调用方法我们先前创建的测试数据删除一项。 4.创建方法删除数据 现在我们去到 home.js 文件编写方法处理数据删除。...this.items[i] == item){ this.items.splice(i, 1); } } } } 现在你向左侧滑动列表项,然后点击删除按钮,它就会列表删除

3.8K100

介绍几个移动web app开发框架

项目主页:http://frozenui.github.io Github代码托管地址:https://github.com/frozenui/frozenui ionic Ionic提供了一个免费且开源的移动优化...Ionic既是一个CSS框架也是一个Javascript UI库。...Ionic遵循视图控制模式,通俗的理解和 Cocoa 触摸框架相似。在视图控制模式,我们将界面的不同部分分为子视图或包含其他视图的子视图控制器。然后视图控制器“驱动”内部视图来提供交互和UI功能。...一个很好的例子就是标签栏(Tab Bar)视图控制器处理点击标签栏在一系列可视化面板间切换。 github。...Angular UI的关键字有: Bootstrap 3 AngularJS Bootstrap 3 Mobile组件,比如switches, overlays和sidebars,这些都是bootstrap没有的

6K20

【开发指南】(四)Ionic3快速上手并了解这些

开发环境配置 开发ionic项目,我们经常需要使用ionic-cli,其内置了很多命令,基本每个命令都带可选的参数参数--help,要想知道某个命令的详情,在敲入命令后面加上--help即可,敲入以下命令...成功运行界面 如果你的是苹果系统,装了xcode,可以敲入以下命令直接在真机或模拟器运行。...2)覆盖主题中个别样式 同样是在src/theme/variables.scss文件,如果你对默认的样式不太满意,可以覆写对应的Ionic变量,基本的背景色、文字颜色、组件宽高等等,下面代码演示设置统一背景色和文字字体...2)习惯使用ionic-cli 使用cli提供的generate指令。...,有兴趣可以看此文: http://www.jianshu.com/p/f508b3e2ecc7 8、建议使用chrome调试 调试Web时,调出【开发者工具】,选【终端】模式,以更好查看应用效果,在

3.2K20

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

1、这个功能需要我们用到ionic提供的registerBackButtonAction方法(注册硬件后退按钮动作) registerBackButtonAction(callback, priority..., [actionId]) 参数 类型 说明 callback function 当点击返回按钮时触发,如果该监视器具有最高的优先级 priority number 仅最高优先级的会执行 actionId...(可空) * 该id指定这个动作 默认: 一个随机且唯一的id 后退按钮的优先执行顺序: 返回到上一个视图 = 100 关闭侧边菜单 = 150 关闭模版modal = 200 关闭上拉菜单action...例如:如果一个上拉菜单已经显示,后退按钮应该关闭上拉菜单,而不是返回一个页面视图或关闭一个打开的模型。...所以我们要实现“再按一次退出app”的功能,可以将优先级priority设为101 2、代码实现 在js angular.module("app").run(["$rootScope", "$ionicPlatform

1.8K20

14个UI精美功能强大的Android应用设计模板

这篇文章各大知名的模板网站找了14个适用于Android开发的最佳商业应用设计模板,类型包括金融、教育、服务等行业,种类丰富,UI精美,功能强大,一起来看看吧! 1....这款应用采用了典型的大图配文字的排版模式,图片占比大。模板包括40多个图标和13个屏幕,登录、注册页面、主页、类别列表等。...多个页面采用网格视图的排版模式,设计简单大方。整体风格轻快,功能不多但简要。 功能: 登录页面 注册页面 网格视图主页 添加任务页面 今天的任务详细页面 下载模板 12....模板包括60多个图标和15个以上的屏幕,登录、优化详细信息、地图视图、属性列表等。...Ionic Juice Bar - 概念App ? Ionic juice bar是一个漂亮的应用程序概念App,可以在ironic应用程序中使用。

4K10

前端Js框架汇总

它本质上只是某个数据库查找一些值并将它们组成一个响应。由于响应是少量文本,入站请求也是少量的文本,因此流量不高,一台机器甚至也可以处理最繁忙的公司的API需求。 2....从技术上讲, Vue.js 集中在 MVVM 模式上的视图模型层,并通过双向数据绑定连接视图和模型。实际的 DOM 操作和输出格式被抽象出来成指令和过滤器。...很多人认为 React 是 MVC 的 V(视图)。我们创造 React 是为了解决一个问题:构建随着时间数据不断变化的大规模应用程序。为了达到这个目标,React 采用下面两个主要的思想。...Ionic遵循视图控制模式,通俗的理解和 Cocoa 触摸框架相似。在视图控制模式,我们将界面的不同部分分为子视图或包含其他视图的子视图控制器。然后视图控制器“驱动”内部视图来提供交互和UI功能。...一个很好的例子就是标签栏(Tab Bar)视图控制器处理点击标签栏在一系列可视化面板间切换。 浏览我们的API文档来了解视图控制器和Ionic可用的Javascript实用工具。

6.4K30

目前比较火的前端框架及UI组件

它本质上只是某个数据库查找一些值并将它们组成一个响应。由于响应是少量文本,入站请求也是少量的文本,因此流量不高,一台机器甚至也可以处理最繁忙的公司的API需求。   2....从技术上讲, Vue.js 集中在 MVVM 模式上的视图模型层,并通过双向数据绑定连接视图和模型。实际的 DOM 操作和输出格式被抽象出来成指令和过滤器。...很多人认为 React 是 MVC 的 V(视图)。我们创造 React 是为了解决一个问题:构建随着时间数据不断变化的大规模应用程序。为了达到这个目标,React 采用下面两个主要的思想。...Ionic遵循视图控制模式,通俗的理解和 Cocoa 触摸框架相似。在视图控制模式,我们将界面的不同部分分为子视图或包含其他视图的子视图控制器。然后视图控制器“驱动”内部视图来提供交互和UI功能。...一个很好的例子就是标签栏(Tab Bar)视图控制器处理点击标签栏在一系列可视化面板间切换。 浏览我们的API文档来了解视图控制器和Ionic可用的Javascript实用工具。

4.9K40

Ionic2 Rest 认证1、创建Ionic 2 APP2、创建服务3、创建登陆和注册页面4、登出和token检查

我们需要一个列表 3.获取远程数据 4.推送数据到服务器 总结 Ionic 2 的样式与主题 Ionic 2主题简介 创建Ionic 2应用主题的方式 没有苹果电脑打包iOS平台的...插件 Ionic 和 Cordova 的误解 使用Ionic Native 使用没有包含在Ionic Native的插件 Ionic 2 添加图表 1....使用照片倾斜浏览组件 总结 Ionic 2 实现一个简单的进度条 理解 自定义组件的 Input 和 output 1.创建一个新的应用 2.创建组件 修改src/components/...progress-bar/progress-bar.ts如下: 3.使用这个组件 总结 使用VS Code在Chrome调试Ionic 2 优化你的Ionic2应用 打开Angular产品模式...修改(click) 为 (tap) 使用 --prod 参数编译 总结 Ionic 2 开发遇到的问题及处理集 Console.log 不输出 编译Android报错:compileArmv7DebugJavaWithJavac

3.7K30

Angular2、Ionic、TypeScript、es6的关系?

比如在Angular2,用TypeScript明显好于ES6。 -- 某网友 TypeScript的开发者c#之父,所以这个TypeScript的很多语言特性是c#移过来的。...TypeScript大概是ES7的实现,所以语法角度来讲,是具有很大优势。TypeScript可选择编译成ES5或ES3,ts文件编译成js文件,并且ts文件可直接在浏览器调试。...这意味着所有的视图、应用路由和控制器都是由AngularJS处理的。Ionic为它自己的组件提供了一组指令,因此开发者能够使用Angular创建自定义HTML元素的能力定义Ionic UI组件。...@Component这个Annotation告诉Angular,这个类是一个组件,这个@View,给出这个组件关于视图相关信息,在这里,他是一个HTML模板。...消费者的角度来看,一个Decorator确实看起来像我们所知道的“AtScript Annotation”。但有一个显著差异。你需要负责装饰你的代码。

5.2K30

ionic3升级适配angular5

先看下ionic3的更新版本,同一天发布了三个版本,后两个版本都是修复一两个小bug的。 ? ionic3最新版本 ?...angular5的更新说明: ---- 更改内容: I18n更改; 内置管道Date、Currency、Percent的更改; 弃用内容: compiler: ngGetContentSelectors...在本项目中,因为没有用到那几个内置管道,也没有用到路由,所以主要是调整Http模块: 在4.xHttpClient模块被封装在@angular/common,新的HttpClient被封装在@angular.../common/http,更新Http模块后,需要使用HttpClientModule替换原有HttpModule,并在使用http服务时,可以去掉map(res=>res.json())的调用,因为新模块已经不再需要了...common/http'; …… constructor(public http: HttpClient) { } 若有请求选项,直接用一个any对象(因为原来的RequestOptions已经不用了),

2.5K40

Spring Boot 之 Spring Data JPA(一)1、新建工程2、配置数据库3、代码结构4、数据到逻辑总结

请看: JUnit窗口 IDE里面的JUnit 视图窗口,运行了两个测试方法,全部通过。这里仅是示例,实际测试应更复杂,需分析测试覆盖率等。...我们需要一个列表 3.获取远程数据 4.推送数据到服务器 总结 Ionic 2 的样式与主题 Ionic 2主题简介 创建Ionic 2应用主题的方式 没有苹果电脑打包iOS平台的...插件 Ionic 和 Cordova 的误解 使用Ionic Native 使用没有包含在Ionic Native的插件 Ionic 2 添加图表 1....progress-bar/progress-bar.ts如下: 3.使用这个组件 总结 使用VS Code在Chrome调试Ionic 2 优化你的Ionic2应用 打开Angular产品模式...修改(click) 为 (tap) 使用 --prod 参数编译 总结 Ionic 2 开发遇到的问题及处理集 Console.log 不输出 编译Android报错:compileArmv7DebugJavaWithJavac

4.5K50
领券