码迷,mamicode.com
首页 > 其他好文 > 详细

angular4自定义双向绑定

时间:2018-07-01 15:18:39      阅读:292      评论:0      收藏:0      [点我收藏+]

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

 

angular4自定义双向绑定

标签:SM   color   span   val   遇到   control   变量   highlight   默认   

原文地址:https://www.cnblogs.com/Vibge/p/9250196.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!