使用Angular7開發一個Radio組件

1、準備工做

Angular7（如下簡稱ng7）,已經跟以前版本大有不一樣。新建工程後，可方便建立library（簡稱lib）,lib是什麼呢？就是一個npm包的源碼包。npm做爲強大的包管理器，已經成爲不少FEer分享智慧成果的法器。本文主要介紹本人寫的一個radio組件。

2、開發組件radio過程

一、使用ng cli,新建工程，建立lib

// 安裝ng cli
npm install -g @angular/cli
// 新建工程
ng new ng-project
// 進入ng-project  建立一個lib
ng generate library radio
複製代碼

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

三、radio結構以下

<!--說明：這實際上是一個radio-group 由於radio通常都是分組使用，這裏有幾個注意點
一、組內radio的name屬性保持一致、組外保持惟一
二、經過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>
複製代碼

四、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中是這樣定義和使用的

他們分別是在formcontrol的updateOn（這個屬性能夠自定義）屬性值爲change或者blur的時候調用。所以，咱們在重寫這兩個方法的時候應該注意，是重寫一個仍是都要重寫。本組件兩個方法都重寫了，由於值變動的時機自定義成了blur。

3、這就是個人關於radio組件的封裝開發，還請各位大牛朋友們多多指點，後續會繼續推出關於Angular的開發以及研究。