快捷導(dǎo)航

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

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

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

一、準(zhǔn)備工作

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

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

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

<!--說明：這其實(shí)是一個(gè)radio-group 因?yàn)閞adio一般都是分組使用，這里有幾個(gè)注意點(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)識(shí) */
  @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 = () => { }

}

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

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

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

他們分別是在formcontrol的updateOn（這個(gè)屬性可以自定義）屬性值為change或者blur的時(shí)候調(diào)用。因此，我們?cè)谥貙戇@兩個(gè)方法的時(shí)候應(yīng)該注意，是重寫一個(gè)還是都要重寫。本組件兩個(gè)方法都重寫了，因?yàn)橹底兏臅r(shí)機(jī)自定義成了blur。

三、這就是我的關(guān)于radio組件的封裝開發(fā)，還請(qǐng)各位大牛朋友們多多指點(diǎn)，后續(xù)會(huì)繼續(xù)推出關(guān)于Angular的開發(fā)以及研究。

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，謝謝大家對(duì)腳本之家的支持。

您可能感興趣的文章: