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 方法没有写，导致数据获取不到，小伙伴们，不要在同一个地方跌倒哟

 

查看更多关于angular4自定义双向绑定的详细内容...