構建一個自定義 angular2 輸入組件

時間 2019-11-06

標籤構建一個自定義 angular2 angular 輸入組件欄目 AngularJS 简体版

原文原文鏈接

構建一個自定義 angular2 輸入組件

今天咱們來學習如何正確的構建和一個具備和 <input type="text"> 一樣做用，但同時也具備本身的邏輯的輸入組件。css

在讀這篇文章以前，但願你已經把官方的文檔和案例都看過至少一遍了，具體的一些概念和細節不會在文章中講解。html

咱們先來看一下咱們這篇文章裏面所介紹的組件的表現形式是怎麼樣的：git

OK，上圖就是咱們所要達到的效果了。那麼，咱們來分析下咱們這個組件該具有哪些功能。github

聚焦的時候，底部邊框爲綠色typescript
具備本身的部分邏輯，好比在有輸入值的狀況下，會出現一個刪除圖標api
當輸入值爲空的時候，提示錯誤文案瀏覽器
能夠插入其它的 DOM，好比最下面的發送驗證碼按鈕angular2
支持 input 的必要屬性，好比 maxlength、placeholder等app
支持表單 angular2 form-control 表單綁定，如上圖中的值都是從 FormBuilder 中構建的ide

咱們將在後面一步步的來說解如何實現這樣一個自定義組件的功能；

建立一個 angular2 組件

咱們先來構建一個基礎的 angular2 組件,這裏咱們先新建一個叫作 input-control 的組件。

首先是 input-control.component.ts 文件：

@Component({
  selector: 'input-control',
  templateUrl: 'input-control.component.html',
  styleUrls: ['input-control.component.scss'],
  encapsulation: ViewEncapsulation.None,
})

而後是 input-control.component.html 文件：

<input #input
  [type]="type"
  [name]="name"
  (focus)="_handleFocus($event)"
  (blur)="_handleBlur($event)"
  [placeholder]="placeholder"
  [(ngModel)]="value"
  [minlength]="minlength"
  [maxlength]="maxlength"
  [readonly]="readonly"
  [disabled]="disabled">
<i #iconDelete *ngIf="focused && !readonly" class="icon icon-delete" (click)="_handleClear($event)"></i>

剩下就是 input-control.component.scss 文件了，這裏我就不貼出代碼了，各位能夠根據本身的項目來設置對應的樣式

最後，就是咱們調用的時候的方式:

<input-control class="input-control"
  [class.error]="!mobile.valid && mobile.touched"
  type="tel"
  name="mobile"
  placeholder="手機號"
  maxlength="11"
  [formControl]="mobile">
  <p *ngIf="mobile.touched && mobile.hasError('mobile')" class="error-tips">請輸入正確的手機號碼</p>
</input-control>

是否對於上面的一些屬性和變量感到困惑，別急，讓我一步步道來！

功能細分

輸入屬性 `@Input()`

有一點要謹記：咱們是在用 DIV 來模擬一個 input 的表現，同時具有本身的邏輯; 因此，當咱們須要 input 的對應屬性值的時候，咱們都須要從父容器傳遞到組件內部的 input 上面，因此在這裏咱們須要用到 @Input 特性了

咱們在 input-control.component.ts 定義咱們所需的一些屬性：

@Component({
  selector: 'input-control',
  templateUrl: 'input-control.component.html',
  styleUrls: ['input-control.component.scss'],
  host: {
    // 宿主元素 click 事件，觸發 focus() 事件
    '(click)': 'focus()',
    // 切換宿主元素 focus 樣式
    '[class.focus]': 'focused'
  }
})
export class InputControlComponent {
  private _focused: boolean = false;
  private _value: any = '';
  private _disabled: boolean = false;
  private _readonly: boolean = false;
  private _required: boolean = false;

  // 外部傳入屬性
  @Input() type: string = 'text';
  @Input() name: string = null;
  @Input() placeholder: string = null;
  @Input() minlength: number;
  @Input() maxlength: number;

  // value 屬性，以 get 方式攔截
  get value(): any {
    return this._value;
  };

  @Input() set value(v: any) {
    v = this._convertValueForInputType(v);
    if (v !== this._value) {
      this._value = v;
      // 觸發值改變事件，冒泡給父級
      this._onChangeCallback(v);
    }
  }

  // 只讀屬性
  get focused() {
    return this._focused;
  }

  @Input()
  get disabled(): boolean {
    return this._disabled;
  }
  set disabled(value) {
    this._disabled = this._coerceBooleanProperty(value);
  }

  @Input()
  get readonly(): boolean {
    return this._readonly;
  }
  set readonly(value) {
    this._readonly = this._coerceBooleanProperty(value);
  }

  @Input()
  get required(): boolean {
    return this._required;
  }
  set required(value) {
    this._required = this._coerceBooleanProperty(value);
  }
}

回顧的咱們前面的 input-control.component.html 文件，咱們定義了 type、name、placeholder、minlength、maxlength 可讀寫的屬性，同時還有 value、readonly、disabled、required 等只讀屬性。經過 [屬性]="源" 方式，接收父級傳入的數據。

OK，屬性咱們都知道如何從父級去接收了，那麼接下來咱們來實現點擊操做：

咱們先修改 input-control.component.ts 文件

@Component({
  ……
  host: {
    // 宿主元素 click 事件，觸發 focus() 事件
    '(click)': 'focus()',
    // 切換宿主元素 focus 樣式
    '[class.focus]': 'focused'
  }
})

咱們利用了 host 這個屬性，用來給宿主元素對應操做，傳送門 @Component 相關屬性;
咱們給宿主元素也就是 <input-control></input-control> 綁定了一個 click 事件，同時根據自身屬性 focused 來切換一個 .focus 類。在咱們組件的 focus() 事件中，咱們須要讓組件內部的 input 聚焦，同時切換自身的 focused 值。爲了拿到咱們組件內部的 input 元素，這裏咱們須要使用 @ViewChild()。

修改 input-control.component.ts 文件以下：

@Component({
  ……
  host: {
    // 宿主元素 click 事件，觸發 focus() 事件
    '(click)': 'focus()',
    // 切換宿主元素 focus 樣式
    '[class.focus]': 'focused'
  }
})
export class InputControlComponent {
  ……
  ……

  private _focusEmitter: EventEmitter<FocusEvent> = new EventEmitter<FocusEvent>();
  @ViewChild('input') _inputElement: ElementRef; // 組件內部 input 元素
  @ViewChild('iconDelete') iconDelete: ElementRef; // 刪除圖標元素

  constructor(private hostRef: ElementRef) {
  }

  // 監聽全局的點擊事件，若是不是當前 input-control 組，則視爲失去焦點操做
  @HostListener('window:click', ['$event'])
  inputControlBlurHandler(event) {
    var parent = event.target;
    // 如何當前節點不是宿主節點，而且不等於 document 節點
    while (parent && parent != this.hostRef.nativeElement && parent != document) {
      // 取當前節點的父節點繼續尋找
      parent = parent.parentNode;
    }

    // 找到最頂層，則表示已經不在宿主元素內部了，觸發失去焦點 fn
    if (parent == document) {
      this._focused = false;
    }
  }

  // 宿主聚焦
  focus() {
    // 觸發下面的 _handleFocus() 事件
    this._inputElement.nativeElement.focus();
  }

  // 輸入框聚焦
  _handleFocus(event: FocusEvent) {
    this._focused = true;
    this._focusEmitter.emit(event);
  }

  // 清空輸入值
  _handleClear() {
    this.value = '';
    return false;
  }

  // 這裏觸發 blur 操做，可是不改變 this._focused 的值，
  // 否則刪除圖標沒法實現它的功能，
  //設置 this._focused 的值將由上面的 @HostListener('window:click', ['$event']) 來處理
  // 觸發父級的 blur 事件
  _handleBlur(event: any) {
    this._onTouchedCallback();
    this._blurEmitter.emit(event);
  }

  // 對外暴露 focus 事件
  @Output('focus') onFocus = this._focusEmitter.asObservable();
  ……
  ……
}

在上面的代碼中，咱們經過宿主的 focus() 事件，讓 input 元素 focus, 同時 input 元素聚焦以後，會觸發下面的 _handleFocus() 方法，在這個方法裏面，咱們修改組件自身的 focused 屬性，並對外發射一個 focus 事件，用來向父級傳遞使用。同時，咱們的刪除圖標也是根據組件的 focused 屬性切換顯示：

<input #input
  [type]="type"
  [name]="name"
  (focus)="_handleFocus($event)"
  (blur)="_handleBlur($event)"
  [placeholder]="placeholder"
  [(ngModel)]="value">
<i #iconDelete 
    *ngIf="focused && !readonly" 
    class="icon icon-delete" 
    (click)="_handleClear($event)"></i>

咱們的 input 和組件內部的 value 屬性進行了雙向綁定，因此在 _handleClear 以後，咱們的輸入框的值天然也就被清空了。

值訪問器 ControlValueAccessor

在完成上面的一些步驟以後，咱們的組件基本功能完成了，可是接下來還有最重要的一部份內容，那就是讓咱們的自定義組件得到 值訪問 權限。
在官方的文檔中有提到一點 https://github.com/angular/material2/blob/master/src/lib/input/input.ts

在查看官方的文檔以後，咱們發現要實現自定義組件的值訪問權限，咱們須要繼承 ControlValueAccessor 接口，同時實現它內部的對應的接口

// 要實現雙向數據綁定，這個不可少
export const INPUT_CONTROL_VALUE_ACCESSOR: any = {
  provide: NG_VALUE_ACCESSOR,
  useExisting: forwardRef(() => InputControlComponent),
  multi: true
};

const noop = () => {
};

@Component({
  selector: 'input-control',
  templateUrl: 'input-control.component.html',
  styleUrls: ['input-control.component.scss'],
  host: {
    // 宿主元素 click 事件，觸發 focus() 事件
    '(click)': 'focus()',
    // 切換宿主元素 focus 樣式
    '[class.focus]': 'focused'
  },
  // 
  encapsulation: ViewEncapsulation.None,
  providers: [INPUT_CONTROL_VALUE_ACCESSOR]
})
export class InputControlComponent implements ControlValueAccessor {
  ……
  ……
  /** Callback registered via registerOnTouched (ControlValueAccessor)
   * 此屬性在作表單校驗的時候，不可少，
   * 若是缺乏了這個屬性，FormControl.touched 屬性將監測不到，切記！！
   */
  private _onTouchedCallback: () => void = noop;
  /** Callback registered via registerOnChange (ControlValueAccessor) */
  private _onChangeCallback: (_: any) => void = noop;

  /**
   * Write a new value to the element.
   */
  writeValue(value: any) {
    this._value = value;
  }

  /**
   * Set the function to be called when the control receives a change event.
   */
  registerOnChange(fn: any) {
    this._onChangeCallback = fn;
  };

  /**
   * Set the function to be called when the control receives a touch event.
   */
  registerOnTouched(fn: any) {
    this._onTouchedCallback = fn;
  }
  ……
  ……
}

正如上面代碼中所示的同樣，實現了這些對應的接口以後，咱們就能像使用普通的 input 元素同樣使用咱們的自定義組件了。

容許組件加載內部其它的 DOM 元素

回顧咱們前面文章開頭的 GIF 圖片，咱們還有一個獲取驗證碼的按鈕，同時，咱們的錯誤提示也是放在組件內部的。要支持這種形式的，咱們須要在組件內部加上 <ng-content></ng-content> 標籤
有了這個以後，全部包裹在 <input-control></input-control> 組件內部的元素都將被渲染到組件內部

父組件調用 input-control:

<input-control class="input-control sms-control"
  [class.error]="!captcha.valid && captcha.touched"
  type="tel"
  name="captcha"
  placeholder="請輸入驗證碼"
  [formControl]="captcha"
  maxlength="5">
  <count-down class="btn-send-sms" counter="50" title="獲取驗證碼" countText="秒後從新獲取"></count-down>
  <p *ngIf="!captcha.valid && captcha.touched" class="error-tips">請輸入驗證碼</p>
</input-control>

瀏覽器渲染以後的的 DOM 結構：

<input-control class="input-control sms-control ng-untouched ng-pristine ng-invalid" maxlength="5" name="captcha" placeholder="請輸入驗證碼" type="tel" ng-reflect-maxlength="5" ng-reflect-type="tel" ng-reflect-name="captcha" ng-reflect-placeholder="請輸入驗證碼" ng-reflect-form="[object Object]">
  <input ng-reflect-maxlength="5" ng-reflect-name="captcha" ng-reflect-type="tel" type="tel" ng-reflect-placeholder="請輸入驗證碼" placeholder="請輸入驗證碼" maxlength="5" class="ng-untouched ng-pristine ng-valid">
<!--template bindings={
  "ng-reflect-ng-if": null
}-->
  <count-down class="btn-send-sms" counttext="秒後從新獲取" counter="50" title="獲取驗證碼" ng-reflect-counter="50" ng-reflect-title="獲取驗證碼" ng-reflect-count-text="秒後從新獲取"><button>獲取驗證碼</button></count-down>
      <!--template bindings={
  "ng-reflect-ng-if": null
}-->
</input-control>

與 FormControl 結合使用注意事項

在後期的時候，我整合了自定輸入組件與 FormControl 一塊兒使用，在使用過程當中，發如今須要使用 .touched 特性的時候，發現沒法生效，經過查資料發現，若是須要讓這個特性生性，咱們的輸入組件必須監聽 blur 事件而且在處理事件中調用觸發對外的 blur 事件，具體代碼見前面的 _handleBlur() 內容。

完整 Demo 地址：mcare-app
這個 Demo 裏面整合了路由、子模塊、服務、動態表單等特性的使用方法，有興趣的能夠參考下，還在持續完善中。這個 Demo 是參照本身作過的項目部分UI，固然不會涉及核心的業務代碼：）。