摘要:一準(zhǔn)備工作以下簡(jiǎn)稱(chēng)已經(jīng)跟之前版本大有不同。新建工程后,可方便創(chuàng)建簡(jiǎn)稱(chēng)是什么呢就是一個(gè)包的源碼包。本文主要介紹本人寫(xiě)的一個(gè)組件。這是的一個(gè)可以方便原生和傳值。本組件兩個(gè)方法都重寫(xiě)了,因?yàn)橹底兏臅r(shí)機(jī)自定義成了。
一、準(zhǔn)備工作
Angular7(以下簡(jiǎn)稱(chēng)ng7),已經(jīng)跟之前版本大有不同。新建工程后,可方便創(chuàng)建library(簡(jiǎn)稱(chēng)lib),lib是什么呢?就是一個(gè)npm包的源碼包。npm作為強(qiáng)大的包管理器,已經(jīng)成為很多FEer分享智慧成果的法器。本文主要介紹本人寫(xiě)的一個(gè)radio組件。
二、開(kāi)發(fā)組件radio過(guò)程 1、使用ng cli,新建工程,創(chuàng)建lib// 安裝ng cli npm install -g @angular/cli // 新建工程 ng new ng-project // 進(jìn)入ng-project 創(chuàng)建一個(gè)lib ng generate library radio2、生成結(jié)構(gòu)如圖所示 接下來(lái)開(kāi)始寫(xiě)組件 3、radio結(jié)構(gòu)如下
4、radio組件主體代碼如下
export class RadioGroupComponent implements ControlValueAccessor { /* radio 數(shù)組 */ @Input() data: Radio[] = []; /* radio 類(lèi)型 原生或者按鈕類(lèi)型*/ @Input() type: string; /* name標(biāo)識(shí) */ @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的一個(gè)forms API,可以方便原生DOM和ng forms傳值。在組件元數(shù)據(jù)中這樣定義
@Component({ selector: "radiogroup", templateUrl: "./radiogroup.component.html", providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => RadioGroupComponent), multi: true, }] })
的
注意,是重寫(xiě)一個(gè)還是都要重寫(xiě)。本組件兩個(gè)方法都重寫(xiě)了,因?yàn)橹底兏臅r(shí)機(jī)自定義成了blur。
三、這就是我的關(guān)于radio組件的封裝開(kāi)發(fā),還請(qǐng)各位大牛朋友們多多指點(diǎn),后續(xù)會(huì)繼續(xù)推出關(guān)于Angular的開(kāi)發(fā)以及研究。文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://m.specialneedsforspecialkids.com/yun/105235.html
摘要:記錄自己在學(xué)習(xí)中對(duì)路由的理解路由不在的包中如果要使用的路由需要從中引入路由的使用子路由使用子路由使用方法父組件中在中導(dǎo)入模塊然后在中加入即可就是路由的出口表示路由對(duì)應(yīng)的組件應(yīng)該在這里顯示 記錄自己在學(xué)習(xí)angular中對(duì)路由的理解 angular路由不在angular的包中, 如果要使用angular的路由, 需要從@angular/router中引入 路由的使用: 子路由使用: im...
摘要:起因看到項(xiàng)目中很多,使用方法都是使用標(biāo)簽引入。解決方案在網(wǎng)上了解到可以將眾多文件合并成一個(gè),用的方式區(qū)分不同的圖案,然后使用標(biāo)簽引用。在版本廢棄了命令,不再支持自定義,而中的未提供自定義或是執(zhí)行外掛腳本的配置。 起因 看到項(xiàng)目中很多svg,使用方法都是使用img標(biāo)簽引入。于是就想將svg合并,像字體圖標(biāo)那樣方便使用。 解決方案 ??在網(wǎng)上了解到可以將眾多svg文件合并成一個(gè),用symb...
摘要:年末促銷(xiāo)葡萄城歲末福利火熱放送中前端開(kāi)發(fā)工具包年度第三個(gè)大版本已經(jīng)正式發(fā)布,本次更新除了全面支持之外,還允許用戶使用在前端更高效地導(dǎo)出智能的分組表頭屬性全新的主題示例以及功能增強(qiáng)。 轉(zhuǎn)載請(qǐng)注明出處:葡萄城官網(wǎng),葡萄城為開(kāi)發(fā)者提供專(zhuān)業(yè)的開(kāi)發(fā)工具、解決方案和服務(wù),賦能開(kāi)發(fā)者。 【年末促銷(xiāo)】葡萄城 2018 歲末福利火熱放送中 WijmoJS(前端開(kāi)發(fā)工具包)2018年度第三個(gè)大版本已經(jīng)正...
閱讀 2481·2021-11-16 11:45
閱讀 2453·2021-10-11 10:59
閱讀 2257·2021-10-08 10:05
閱讀 3844·2021-09-23 11:30
閱讀 2380·2021-09-07 09:58
閱讀 813·2019-08-30 15:55
閱讀 780·2019-08-30 15:53
閱讀 1929·2019-08-29 17:00