最近在工作中遇到了自定義組件,實現雙向綁定,之前也有這樣的需求,不過都被我這樣那樣的用較麻煩的方法避開了,不過這次還是老老實實地用雙向綁定吧。
自定義組件
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 方法沒有寫,導致數據獲取不到,小伙伴們,不要在同一個地方跌倒喲