angular4自定義雙向綁定

最近在工做中遇到了自定義組件，實現雙向綁定，以前也有這樣的需求，不過都被我這樣那樣的用較麻煩的方法避開了，不過此次仍是老老實實地用雙向綁定吧。

自定義組件

 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 方法沒有寫，致使數據獲取不到，小夥伴們，不要在同一個地方跌倒喲