一、準備工作
成都創(chuàng)新互聯(lián)公司堅持“要么做到，要么別承諾”的工作理念，服務領(lǐng)域包括：網(wǎng)站建設(shè)、成都做網(wǎng)站、企業(yè)官網(wǎng)、英文網(wǎng)站、手機端網(wǎng)站、網(wǎng)站推廣等服務，滿足客戶于互聯(lián)網(wǎng)時代的荷塘網(wǎng)站設(shè)計、移動媒體設(shè)計的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡建設(shè)合作伙伴！
Angular7（以下簡稱ng7）,已經(jīng)跟之前版本大有不同。新建工程后，可方便創(chuàng)建library（簡稱lib）,lib是什么呢？就是一個npm包的源碼包。npm作為強大的包管理器，已經(jīng)成為很多FEer分享智慧成果的法器。本文主要介紹本人寫的一個radio組件。
二、開發(fā)組件radio過程
1、使用ng cli,新建工程，創(chuàng)建lib
// 安裝ng cli npm install -g @angular/cli // 新建工程 ng new ng-project // 進入ng-project 創(chuàng)建一個lib ng generate library radio
2、生成結(jié)構(gòu)如圖所示 接下來開始寫組件
.jpg)
3、radio結(jié)構(gòu)如下
4、radio組件主體代碼如下
重慶分公司
重慶分公司
export class RadioGroupComponent implements ControlValueAccessor {
/* radio 數(shù)組 */
@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傳值。在組件元數(shù)據(jù)中這樣定義
@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的時候調(diào)用。因此，我們在重寫這兩個方法的時候應該注意，是重寫一個還是都要重寫。本組件兩個方法都重寫了，因為值變更的時機自定義成了blur。
三、這就是我的關(guān)于radio組件的封裝開發(fā)，還請各位大牛朋友們多多指點，后續(xù)會繼續(xù)推出關(guān)于Angular的開發(fā)以及研究。
總結(jié)
以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值，謝謝大家對創(chuàng)新互聯(lián)的支持。
