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，数据都是死的，实际应用过程中可以根据实际需求扩展