<table id="caao6"><object id="caao6"></object></table>
  • <small id="caao6"><label id="caao6"></label></small>
    <acronym id="caao6"><rt id="caao6"></rt></acronym>
  • <acronym id="caao6"></acronym>
  • 利用Angular7開發一個Radio組件的全過程

     更新時間:2019-07-11 22:00:58   作者:佚名   我要評論(0)

    一、準備工作


    Angular7(以下簡稱ng7),已經跟之前版本大有不同。新建工程后,可方便創建library(簡稱lib),lib是什么呢?就是一個npm包的源碼包。npm作為

    一、準備工作

    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結構如下

    <!--說明:這其實是一個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中是這樣定義和使用的


    他們分別是在formcontrol的updateOn(這個屬性可以自定義)屬性值為change或者blur的時候調用。因此,我們在重寫這兩個方法的時候應該注意,是重寫一個還是都要重寫。本組件兩個方法都重寫了,因為值變更的時機自定義成了blur。

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

    總結

    以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作具有一定的參考學習價值,謝謝大家對腳本之家的支持。

    您可能感興趣的文章:

    • Angular7創建項目、組件、服務以及服務的使用
    • Angular7中創建組件/自定義指令/管道的方法實例詳解

    相關文章

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

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

      一、準備工作 Angular7(以下簡稱ng7),已經跟之前版本大有不同。新建工程后,可方便創建library(簡稱lib),lib是什么呢?就是一個npm包的源碼包。npm作為
      2019-07-11
    • Python 200行代碼實現一個滑動驗證碼過程詳解

      Python 200行代碼實現一個滑動驗證碼過程詳解

      前言 做網絡爬蟲的同學肯定見過各種各樣的驗證碼,比較高級的有滑動、點選等樣式,看起來好像挺復雜的,但實際上它們的核心原理還是還是很清晰的,本文章大致
      2019-07-11
    • Spring Boot利用Docker快速部署項目的完整步驟

      Spring Boot利用Docker快速部署項目的完整步驟

      1.簡介 建議閱讀本文最好對Dokcer有一些了解 首先我們先了解一下Docker是什么 Docker 屬于 Linux 容器的一種封裝,提供簡單易用的容器使用接口。它是
      2019-07-11
    • 用python給自己做一款小說閱讀器過程詳解

      用python給自己做一款小說閱讀器過程詳解

      前言 前一段時間書荒的時候,在喜馬拉雅APP發現一個主播播講的小說-大王饒命。聽起來感覺很好笑,挺有意思的,但是只有前200張是免費的,后面就要收費。一章兩
      2019-07-11
    • Python的log日志功能及設置方法

      Python的log日志功能及設置方法

      引入:Python中有個logging模塊可以完成相關信息的記錄,在debug時用它往往事半功倍 一、日志級別(從低到高): DEBUG :詳細的信息,通常只出現在診斷問題上 IN
      2019-07-11
    • 基于sklearn實現Bagging算法(python)

      基于sklearn實現Bagging算法(python)

      本文使用的數據類型是數值型,每一個樣本6個特征表示,所用的數據如圖所示: 圖中A,B,C,D,E,F列表示六個特征,G表示樣本標簽。每一行數據即為一個樣本的六個
      2019-07-11
    • 使用vue for時為什么要key【推薦】

      使用vue for時為什么要key【推薦】

      前言: 用vue框架寫前端代碼時經常會用用到v-for這個方法,但使用此方法時vue推薦我們加上一個唯一標識key這是為什么呢?閱讀了網上各位大神的文章以及自己的
      2019-07-11
    • 聊聊spring boot的WebFluxTagsProvider的使用

      聊聊spring boot的WebFluxTagsProvider的使用

      序 本文主要研究一下webflux的WebFluxTagsProvider WebFluxTagsProvider spring-boot-actuator-2.1.5.RELEASE-sources.jar!/org/springframework/boot/
      2019-07-11
    • 微信小程序開發常見問題及解決方案

      微信小程序開發常見問題及解決方案

      前言 我們在做微信小程序開發的過程中,總會遇到各種奇葩的問題。今天就把我在小程序開發過程中遇到的各種問題,及對應的解決方案總結在這里,方便以后自己回
      2019-07-11
    • Docker基礎教程之Dockerfile語法詳解

      Docker基礎教程之Dockerfile語法詳解

      前言 Dockfile是一種被Docker程序解釋的腳本,Dockerfile由一條一條的指令組成,每條指令對應Linux下面的一條命令。Docker程序將這些Dockerfile指令翻譯真正的
      2019-07-11

    最新評論

    种子磁力搜索器