ionic CheckBox及自定义组件使用

demo：用户在选择联系人页面可多选或者单选联系人进行消息的转发

效果图：

类似于钉钉提交日志选择部门

代码：

首先创建已定义组件用来展示最外层数据

 ionic g componets bmtree

在新建一个页面后来展示内层的数据用组件也可以

 ionic g page demo

创建完成后再需要调用的地方写跳转方法

let SecondPage=this.model.create(BmtreesPage);

SecondPage.onDidDismiss(data => {

this.rytrees=this.qh.selectHobby;

});

SecondPage.present();

注意我这里使用的是model跳转，需要注入相关服务SecondPage.onDidDismiss是用来用户在选择完成后关闭model传递传中的值 this.qh.selectHobby就是选中的值

这里的qh是自定义的providers 用来实现CheckBox单选，多选，取消等业务逻辑 需要注入

bmtree.ts

let SecondPage=this.model.create(HqjtryPage,{rylist:event});

SecondPage.present();

跳转到用来展示数据的页面 这里的rylist就是内层页面的数据

类似图三

然后是最繁琐的部分创建，判断CheckBox的providers 

ionic g providers checkbox

checkbox.ts代码

public selectHobby:Array =[];//存储CheckBox值

 constructor(public http:HttpClient) {

console.log('Hello QhcheckboxProvider Provider');

}

//实现check选中取消的逻辑

selectCheckbox(check:boolean,value:string,id:string) {

var index:number =this.selectHobby1.indexOf(id);

console.log(check);

if (check) {

if (index <0) {

this.selectHobby.push(value);

}

}else {

if (index > -1) {

this.selectHobby.splice(index,1);

}

}

}

然后再bmtree的页面进行调用

(click)="this.qh.selectCheckbox(cv.checked)" #cv [checked]="selectedAll"

[checked]="selectedAll" 是用来实现全选或者全不选 selectedAll默认是boolean

我实现全选或者全不选是通过button来实现的

back1(i){

if(this.selectedAll ==true){

this.selectedAll=false;

this.qh.selectHobby.splice(i,1); //移除所有数据

}else{

this.selectedAll=true;

for(let items of this.tree){

this.qh.selectCheckbox( this.selectedAll);

}

}

}

这样就可以实现了,之前在做的时候 由于调用这个组件的地方比较多，同一个list来存放CheckBox数据的 话就会造成选择数据不对的情况，所以新的页面调用时创建一个新的list就可以了

贴上在div中移除dom的代码

(click)="slide.remove(this.ryyhdhs.splice(i,1),this.rytrees.splice(i,1))"  #slide

在div对应的ts文件中注入

@ViewChildren('slide') slides:QueryList;

由于隔得时间比较久了可能会遗漏如果有疑问可以留言