利用Angular7開發一個Radio組件的全過程

2019-11-19 11:11:44

字體：大中小

來源：轉載

供稿：網友

一、準備工作

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

二、開發組件radio過程

1、使用ng cli,新建工程，創建lib

// 安裝ng clinpm install -g @angular/cli// 新建工程ng new ng-project// 進入ng-project 創建一個libng generate library radio

2、生成結構如圖所示接下來開始寫組件

3、radio結構如下

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

1、組內radio的name屬性保持一致、組外保持唯一

2、通過checked屬性來設置radio的選中狀態，一定不要寫成[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 數組 */  @Input()  data: Radio[] = [];  /* radio 類型  原生或者按鈕類型*/  @Input()  type: string;  /* name標識 */  @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 = () => { }}

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

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

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