标签：SM color span val 遇到 control 变量 highlight 默认
最近在工作中遇到了自定义组件，实现双向绑定，之前也有这样的需求，不过都被我这样那样的用较麻烦的方法避开了，不过这次还是老老实实地用双向绑定吧。
自定义组件
1 @Component({ 2 selector: ‘search-common‘, 3 template: ` 4 <div class="input-group"> 5 <input class="form-control input-sm" type="text" [formControl]="searcher"/> 6 <span class="input-group-btn"> 7 <button class="btn btn-sm btn-primary btn-outline" type="button" 8 (click)="searchCom(searcher.value)">搜索</button> 9 </span> 10 </div> 11 ` 12 })
实现数据的传递
@Output() search = new EventEmitter<string>();
@Output() valueChange = new EventEmitter<string>();
@Input()
set value(value) {
this.searcher.patchValue(value);
}
在数据发生变化的时候，实时传递数据
searchCom(value) {
if (value !== this._value) {
this._value = value;
this.search.emit(value);
this.valueChange.emit(value);
}
}
使用该组件时
<search-common placeholder="搜索" (searchCom)="search($event)" [(value)] = "value"></search-common>
默认的命名方法为在变量名后加上Change以作区分。比较大的坑就是当时在@Input的时候set 方法没有写，导致数据获取不到，小伙伴们，不要在同一个地方跌倒哟
标签：SM color span val 遇到 control 变量 highlight 默认
原文地址：https://www.cnblogs.com/Vibge/p/9250196.html
