利用Angular7開發(fā)一個Radio組件的全過程

更新時間：2019年07月11日 14:17:31 作者：國之大殤

這篇文章主要給大家介紹了關(guān)于如何利用Angular7開發(fā)一個Radio組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Angular7具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧

一、準(zhǔn)備工作

Angular7（以下簡稱ng7）,已經(jīng)跟之前版本大有不同。新建工程后，可方便創(chuàng)建library（簡稱lib）,lib是什么呢？就是一個npm包的源碼包。npm作為強(qiáng)大的包管理器，已經(jīng)成為很多FEer分享智慧成果的法器。本文主要介紹本人寫的一個radio組件。

二、開發(fā)組件radio過程

1、使用ng cli,新建工程，創(chuàng)建lib

// 安裝ng cli
npm install -g @angular/cli
// 新建工程
ng new ng-project
// 進(jìn)入ng-project 創(chuàng)建一個lib
ng generate library radio

2、生成結(jié)構(gòu)如圖所示接下來開始寫組件

3、radio結(jié)構(gòu)如下

<!--說明：這其實是一個radio-group 因為radio一般都是分組使用，這里有幾個注意點(diǎn)

1、組內(nèi)radio的name屬性保持一致、組外保持唯一

2、通過checked屬性來設(shè)置radio的選中狀態(tài)，一定不要寫成[attr.checked]-->

<div class="input-wrap" [class.hor]="horizontal">
  <div class="custom-radio" *ngFor="let item of data; let i=index">
    <input #input class="custom-input" [name]="name" id="{{'radio_'+name+i}}" type="radio"
    [value]="item.value" (click)="clickHandler(item.value)" [checked]="item.value === value" 
    [disabled]="disabled">
    <label class="custom-label" for="{{'radio_'+name+i}}">{{item.name}}</label>
  </div>
</div>

4、radio組件主體代碼如下

export class RadioGroupComponent implements ControlValueAccessor {

  /* radio 數(shù)組 */
  @Input()
  data: Radio[] = [];

  /* radio 類型  原生或者按鈕類型*/
  @Input()
  type: string;

  /* name標(biāo)識 */
  @Input()
  name: string = this.idSer.generate().replace(/-/g, '_');

  /* 水平排列 */
  @Input()
  horizontal: boolean;

  /* 禁用 */
  @Input()
  disabled: boolean;

  /* radio 值 */
  @Input() value: any;

  constructor(private idSer: IdService) {

  }

  clickHandler(val: any) {
    this.value = val;
    // 更改control的值
    this.controlChange(this.value);
    this.controlTouch(this.value);
  }


  writeValue(value: any): void {
    this.value = value;
  }

  registerOnChange(fn: Function): void {
    this.controlChange = fn
  }

  registerOnTouched(fn: Function): void {
    this.controlTouch = fn
  }

  private controlChange: Function = () => { }
  private controlTouch: Function = () => { }

}

說明：其實組件代碼不是很多，但是應(yīng)該注意到，我們繼承了ng的一個interface ControlValueAccessor，這里我覺的是比較值得侃的地方。這是ng的一個forms API,可以方便原生DOM和ng forms傳值。在組件元數(shù)據(jù)中這樣定義

@Component({
  selector: 'radiogroup',
  templateUrl: './radiogroup.component.html',
  providers: [{
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => RadioGroupComponent),
    multi: true,
  }]
})

其中，這里面有兩個重要的方法需要overwrite,不錯，就是registerOnChange和registerOnTouched，這兩個方法在angular中是這樣定義和使用的