ionic2.X+ 自定义popover实现2级筛选

GIF.gif
1.使用Cli 命令ionic generate component FilterMaterial

注意:
1、ionic对component,page等敏感 ,所以命名最好不要含有这些
2、注意这篇文章和自定义component 的区别
3、新建component时会自动在app.module.ts里导入,请手动删除

2.使用

由于是供PopoverController使用的弹出组件,不是常说的自定义指令,所以,在ts中添加
import {IonicPage, NavController, NavParams, PopoverController} from 'ionic-angular';
@Component前加上@IonicPage(),如下

Paste_Image.png

ts中点击事件方法:

Paste_Image.png

this.viewCtrl.dismiss(this.selectedMItem,sItem)方法对应下面的onDidDismiss方法

module.ts代码如下

Paste_Image.png

html代码如下:

Paste_Image.png

在需要用到此组件的地方,将一级菜单和二级菜单传入:

Paste_Image.png

其中cssClass可以改变popover的样式,onDidDismiss方法可以获取组件中返回选中的item数据

这样就可以实现页面传数据进组件,组件操作后的数据返回到页面

这里还有另一种实现方式:

在页面写个回调方法:

Paste_Image.png

在组件中接收回调:
this.callback = this.navParams.get('cb');
this.callback(this.selectedMItem,sItem);
同样将数据传到了页面

Paste_Image.png

以上只是一个的简单的DEMO,数据都是死的,实际应用过程中可以根据实际需求扩展

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 本文使用Ionic2从头建立一个简单的Todo应用,让用户可以做以下事情: 查看todo列表 添加新的todo项 ...
    孙亖阅读 8,595评论 13 29
  • 0 开始之前 通过本教程之前,您应该至少了解一些基本的Ionic 2概念。您还必须已经安装了Ionic 2 在您的...
    孙亖阅读 1,664评论 2 10
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,891评论 18 139
  • Ionic是一个基于Angular2的开发手机web app的框架,它包含了一整套手机端的样式组件,和一系列的功能...
    王兆龙阅读 1,210评论 1 1
  • 完成Ionic安装后,你可以创建第一个App了。本章内容将指导你新建一个App,添加一个页面,并且实现页面间的导航...
    全栈弄潮儿阅读 475评论 0 2