資訊專欄INFORMATION COLUMN
摘要：一準備工作以下簡稱已經(jīng)跟之前版本大有不同。新建工程后，可方便創(chuàng)建簡稱是什么呢就是一個包的源碼包。本文主要介紹本人寫的一個組件。這是的一個可以方便原生和傳值。本組件兩個方法都重寫了，因為值變更的時機自定義成了。
一、準備工作
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 radio2、生成結構如圖所示 接下來開始寫組件 3、radio結構如下
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的一個forms API,可以方便原生DOM和ng forms傳值。在組件元數(shù)據(jù)中這樣定義
@Component({
selector: "radiogroup",
templateUrl: "./radiogroup.component.html",
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => RadioGroupComponent),
multi: true,
}]
})
的
注意，是重寫一個還是都要重寫。本組件兩個方法都重寫了，因為值變更的時機自定義成了blur。
三、這就是我的關于radio組件的封裝開發(fā)，還請各位大牛朋友們多多指點，后續(xù)會繼續(xù)推出關于Angular的開發(fā)以及研究。文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/105235.html
摘要：記錄自己在學習中對路由的理解路由不在的包中如果要使用的路由需要從中引入路由的使用子路由使用子路由使用方法父組件中在中導入模塊然后在中加入即可就是路由的出口表示路由對應的組件應該在這里顯示 記錄自己在學習angular中對路由的理解 angular路由不在angular的包中, 如果要使用angular的路由, 需要從@angular/router中引入 路由的使用: 子路由使用: im...
摘要：起因看到項目中很多，使用方法都是使用標簽引入。解決方案在網(wǎng)上了解到可以將眾多文件合并成一個，用的方式區(qū)分不同的圖案，然后使用標簽引用。在版本廢棄了命令，不再支持自定義，而中的未提供自定義或是執(zhí)行外掛腳本的配置。 起因 看到項目中很多svg，使用方法都是使用img標簽引入。于是就想將svg合并，像字體圖標那樣方便使用。 解決方案 ??在網(wǎng)上了解到可以將眾多svg文件合并成一個，用symb...
摘要：年末促銷葡萄城歲末福利火熱放送中前端開發(fā)工具包年度第三個大版本已經(jīng)正式發(fā)布，本次更新除了全面支持之外，還允許用戶使用在前端更高效地導出智能的分組表頭屬性全新的主題示例以及功能增強。 轉載請注明出處：葡萄城官網(wǎng)，葡萄城為開發(fā)者提供專業(yè)的開發(fā)工具、解決方案和服務，賦能開發(fā)者。 【年末促銷】葡萄城 2018 歲末福利火熱放送中 WijmoJS（前端開發(fā)工具包）2018年度第三個大版本已經(jīng)正...
閱讀 2483·2021-11-16 11:45
閱讀 2457·2021-10-11 10:59
閱讀 2260·2021-10-08 10:05
閱讀 3850·2021-09-23 11:30
閱讀 2380·2021-09-07 09:58
閱讀 819·2019-08-30 15:55
閱讀 782·2019-08-30 15:53
閱讀 1931·2019-08-29 17:00
