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()
,如下
ts
中点击事件方法:
此
this.viewCtrl.dismiss(this.selectedMItem,sItem)
方法对应下面的onDidDismiss
方法
module.ts
代码如下
html
代码如下:
在需要用到此组件的地方,将一级菜单和二级菜单传入:
其中cssClass
可以改变popover的样式,onDidDismiss
方法可以获取组件中返回选中的item数据
这样就可以实现页面传数据进组件,组件操作后的数据返回到页面
这里还有另一种实现方式:
在页面写个回调方法:
在组件中接收回调:
this.callback = this.navParams.get('cb');
this.callback(this.selectedMItem,sItem);
同样将数据传到了页面