使用Angular7開發一個Radio組件

Tony_Zby 發布于2019-08-23 18:26 / 2782人閱讀

摘要：一準備工作以下簡稱已經跟之前版本大有不同。新建工程后，可方便創建簡稱是什么呢就是一個包的源碼包。本文主要介紹本人寫的一個組件。這是的一個可以方便原生和傳值。本組件兩個方法都重寫了，因為值變更的時機自定義成了。

一、準備工作

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

二、開發組件radio過程 1、使用ng cli,新建工程，創建lib

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

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

3、radio結構如下



    
        
        {{item.name}}

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

的

他們分別是在formcontrol的updateOn（這個屬性可以自定義）屬性值為change或者blur的時候調用。因此，我們在重寫這兩個方法的時候應該

注意，是重寫一個還是都要重寫。本組件兩個方法都重寫了，因為值變更的時機自定義成了blur。

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

云服務器 GPU云服務器 vuejs組件使用組件開發前端組件開發在php中使用組件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/105235.html

Angular7.2.7路由初體驗

摘要：記錄自己在學習中對路由的理解路由不在的包中如果要使用的路由需要從中引入路由的使用子路由使用子路由使用方法父組件中在中導入模塊然后在中加入即可就是路由的出口表示路由對應的組件應該在這里顯示記錄自己在學習angular中對路由的理解 angular路由不在angular的包中, 如果要使用angular的路由, 需要從@angular/router中引入路由的使用: 子路由使用: im...

KevinYan 2019-08-23 15:33 評論0 收藏0
Angular7 中使用 svg sprite

摘要：起因看到項目中很多，使用方法都是使用標簽引入。解決方案在網上了解到可以將眾多文件合并成一個，用的方式區分不同的圖案，然后使用標簽引用。在版本廢棄了命令，不再支持自定義，而中的未提供自定義或是執行外掛腳本的配置。起因看到項目中很多svg，使用方法都是使用img標簽引入。于是就想將svg合并，像字體圖標那樣方便使用。解決方案 ??在網上了解到可以將眾多svg文件合并成一個，用symb...

陳江龍 2019-08-26 13:53 評論0 收藏0
【官宣】WijmoJS 2018 v3 正式發布，全面支持Angular7

摘要：年末促銷葡萄城歲末福利火熱放送中前端開發工具包年度第三個大版本已經正式發布，本次更新除了全面支持之外，還允許用戶使用在前端更高效地導出智能的分組表頭屬性全新的主題示例以及功能增強。轉載請注明出處：葡萄城官網，葡萄城為開發者提供專業的開發工具、解決方案和服務，賦能開發者。【年末促銷】葡萄城 2018 歲末福利火熱放送中 WijmoJS（前端開發工具包）2018年度第三個大版本已經正...

suosuopuo 2019-08-23 13:42 評論0 收藏0