angular封装checkbox组件
我们在做项目时，有时也需要自己封装一些组件库的功能。因为无论是什么组件库，可能都封装了一些自己不想用、但人家却认为是必需的功能，如果你不去读人家的代码，那遇到坑的概率就比较大。
我最近也遇到了一个primeng的坑，他封装的checkbox在点击时，不知道加了什么东西，会影响列表布局，因此只能自己手写一个了。
angular的规矩比较多，因此封装组件比起vue要复杂一些，咱们一步一步来。
新建组件
首先我们通过命令生成一个component组件。
ng g c components/checkbox
待实现的功能
//father.component.html:
<ul>
<li *ngFor="let item of listData">
<app-checkbox [(ngModel)]="item.checked" [label]="item.title" (onChange)="doSth($event,item)"></app-checkbox>
</li>
</ul>
//father.component.ts:
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-father',
templateUrl: './father.component.html',
styleUrls: ['./father.component.scss']
})
export class FatherComponent implements OnInit {
listData = [{
checked:false,
title:'张三'
},{
checked:true,
title:'李四'
}];
doSth(obj,item){
item.checked = obj.checked;
console.log(item);
}
......
}
设计思路
checkbox组件主要是利用了label标签的原理。
如果在label标签里面放input，当不设置label的for属性时，点击label会默认点到input上。
因此我们可以把双向绑定仍旧放在input即可，然后我们画一个自己的checkbox样式，将原来的input隐藏。
html结构
<label class="mycheck">
<!--假的input框-->
<span class="inner">
<i>√</i>
</span>
<!--真的input-->
<input type="checkbox" class="origin" />
<span class="title">文本信息</span>
</label>
我们用一个span标签绘制一个假的checkbox框，原来的input需要隐藏掉，这里的对勾请大家自行找个字体库哈。
scss样式
.mycheck {
color:#606266;
cursor:pointer;
white-space: nowrap;
.inner{ /*假的input*/
display: inline-block;
border:1px solid #646464;
width:20px;
height:20px;
line-height:20px;
color:#606266;
text-align: center;
transition:background-color 0.2s,color 0.2s,border-color 0.2s,box-shadow 0.2s;
background-color:#fff;
}
.origin{ /*隐藏真的input*/
position:absolute;
visibility: hidden;
}
.title{
margin-left:5px;
}
}
.isChecked{
.inner{
border-color:#64B5F6;
background:#64B5F6;
color:white;
}
}
隐藏真实的input，我们不能用display:none，因为这样input就从文档流删掉了，因此需要用visibility。不过这还不够，因为visibility会占空位，因此我们还需设置绝对定位让他脱离文档流。
ts逻辑实现
import { Component, OnInit,Input,Output,EventEmitter,forwardRef } from '@angular/core';
import { ControlValueAccessor,NG_VALUE_ACCESSOR } from '@angular/forms'
@Component({
selector: 'app-checkbox',
templateUrl: './checkbox.component.html',
styleUrls: ['./checkbox.component.scss'],
providers:[{ // 固定写法，照着抄就行
provide:NG_VALUE_ACCESSOR,
useExisting:forwardRef(()=>CheckboxComponent),
multi:true
}]
})
export class CheckboxComponent implements OnInit, ControlValueAccessor{
@Input() label:string;
@Output() onChange = new EventEmitter();
private _value = false;
private onModelChange = (v:any)=>{}
private onModelTouched = ()=>{}
//checkbox组件双向绑定的是自己的value，那value什么时候会改变呢？
get value(){
return this._value;
}
set value(v){
this._value = v;
}
//ControlValueAccessor要求实现的
writeValue(v){ //这里改变了value的值，计算属性可以捕获到了
this._value = v;
this.onModelChange(v);
}
//ControlValueAccessor要求实现的
registerOnChange(fn){ //注册change事件
this.onModelChange = fn;
}
//ControlValueAccessor要求实现的
registerOnTouched(fn){//注册click事件
this.onModelTouched = fn;
}
handleChange(ev){
console.log(ev.target.checked);
this.onChange.emit({checked:ev.target.checked}); //当真实的checkbox改变时触发
}
constructor() { }
ngOnInit(): void {
}
}
我们再重复一下实现逻辑。
首先我们把checkbox作为一个独立体看待。
我们设计了value计算属性，但这个value什么时候会被改变呢？
就是ControlValueAccessor接口提供的writeValue方法。
ControlValueAccessor接口需要实现writeValue、registerOnChange、registerOnTouched三个方法，其他两个方法分别是注册change和click事件。
click我们没用到，因此就没写什么东西，主要是用了change事件。
我们在注册时用onModelChange事件接收了形参，这就完成了初始化，然后在writeValue使用onModelChange即可实现赋值。
这些都是固定的写法，大家照着抄就行了。
修正模板
最后我们修正一下模板。
<label class="mycheck" [ngClass]="{'isChecked': value}">
<!--假的input框-->
<span class="inner">
<i *ngIf="value">√</i>
</span>
<!--真的input-->
<input type="checkbox" class="origin" [(ngModel)]="value" (change)="handleChange($event)"/>
<span class="title">{{label}}</span>
</label>
