GIF.gif
1.使用Cli 命令ionic generate component FilterMaterial
注意：
1、ionic對component,page等敏感 ，所以命名最好不要含有這些
2、注意這篇文章和自定義component 的區(qū)別
3、新建component時(shí)會(huì)自動(dòng)在app.module.ts里導(dǎo)入，請手動(dòng)刪除
2.使用
由于是供PopoverController使用的彈出組件，不是常說的自定義指令，所以，在ts中添加
import {IonicPage, NavController, NavParams, PopoverController} from 'ionic-angular';
在@Component前加上@IonicPage()，如下
Paste_Image.png
ts中點(diǎn)擊事件方法：
Paste_Image.png
此
this.viewCtrl.dismiss(this.selectedMItem,sItem)方法對應(yīng)下面的onDidDismiss方法
module.ts代碼如下
Paste_Image.png
html代碼如下：
Paste_Image.png
在需要用到此組件的地方，將一級(jí)菜單和二級(jí)菜單傳入：
Paste_Image.png
其中cssClass可以改變popover的樣式，onDidDismiss方法可以獲取組件中返回選中的item數(shù)據(jù)
這樣就可以實(shí)現(xiàn)頁面?zhèn)鲾?shù)據(jù)進(jìn)組件，組件操作后的數(shù)據(jù)返回到頁面
這里還有另一種實(shí)現(xiàn)方式：
在頁面寫個(gè)回調(diào)方法：
Paste_Image.png
在組件中接收回調(diào)：
this.callback = this.navParams.get('cb');
this.callback(this.selectedMItem,sItem);
同樣將數(shù)據(jù)傳到了頁面
Paste_Image.png
