摘要:構建一個自定義輸入組件今天我們來學習如何正確的構建和一個具有和同樣作用,但同時也具有自己的邏輯的輸入組件。值訪問器在完成上面的一些步驟之后,我們的組件基本功能完成了,但是接下來還有最重要的一部分內容,那就是讓我們的自定義組件獲得值訪問權限。
構建一個自定義 angular2 輸入組件
今天我們來學習如何正確的構建和一個具有和 同樣作用,但同時也具有自己的邏輯的輸入組件。
在讀這篇文章之前,希望你已經把官方的文檔和案例都看過至少一遍了,具體的一些概念和細節不會在文章中講解。
我們先來看一下我們這篇文章里面所介紹的組件的表現形式是怎么樣的:
OK,上圖就是我們所要達到的效果了。那么,我們來分析下我們這個組件該具備哪些功能。
聚焦的時候,底部邊框為綠色
具有自己的部分邏輯,比如在有輸入值的情況下,會出現一個刪除圖標
當輸入值為空的時候,提示錯誤文案
可以插入其它的 DOM,比如最下面的發送驗證碼按鈕
支持 input 的必要屬性,比如 maxlength、placeholder等
支持表單 angular2 form-control 表單綁定,如上圖中的值都是從 FormBuilder 中構建的
我們將在后面一步步的來講解如何實現這樣一個自定義組件的功能;
創建一個 angular2 組件我們先來構建一個基礎的 angular2 組件,這里我們先新建一個叫做 input-control 的組件。
首先是 input-control.component.ts 文件:
@Component({ selector: "input-control", templateUrl: "input-control.component.html", styleUrls: ["input-control.component.scss"], encapsulation: ViewEncapsulation.None, })
然后是 input-control.component.html 文件:
剩下就是 input-control.component.scss 文件了,這里我就不貼出代碼了,各位可以根據自己的項目來設置對應的樣式
最后,就是我們調用的時候的方式:
請輸入正確的手機號碼
是否對于上面的一些屬性和變量感到困惑,別急,讓我一步步道來!
功能細分 輸入屬性 @Input()有一點要謹記:我們是在用 DIV 來模擬一個 input 的表現,同時具備自己的邏輯; 所以,當我們需要 input 的對應屬性值的時候,我們都需要從父容器傳遞到組件內部的 input 上面,所以在這里我們需要用到 @Input 特性了
我們在 input-control.component.ts 定義我們所需的一些屬性:
@Component({ selector: "input-control", templateUrl: "input-control.component.html", styleUrls: ["input-control.component.scss"], host: { // 宿主元素 click 事件,觸發 focus() 事件 "(click)": "focus()", // 切換宿主元素 focus 樣式 "[class.focus]": "focused" } }) export class InputControlComponent { private _focused: boolean = false; private _value: any = ""; private _disabled: boolean = false; private _readonly: boolean = false; private _required: boolean = false; // 外部傳入屬性 @Input() type: string = "text"; @Input() name: string = null; @Input() placeholder: string = null; @Input() minlength: number; @Input() maxlength: number; // value 屬性,以 get 方式攔截 get value(): any { return this._value; }; @Input() set value(v: any) { v = this._convertValueForInputType(v); if (v !== this._value) { this._value = v; // 觸發值改變事件,冒泡給父級 this._onChangeCallback(v); } } // 只讀屬性 get focused() { return this._focused; } @Input() get disabled(): boolean { return this._disabled; } set disabled(value) { this._disabled = this._coerceBooleanProperty(value); } @Input() get readonly(): boolean { return this._readonly; } set readonly(value) { this._readonly = this._coerceBooleanProperty(value); } @Input() get required(): boolean { return this._required; } set required(value) { this._required = this._coerceBooleanProperty(value); } }
回顧的我們前面的 input-control.component.html 文件,我們定義了 type、name、placeholder、minlength、maxlength 可讀寫的屬性,同時還有 value、readonly、disabled、required 等只讀屬性。通過 [屬性]="源" 方式,接收父級傳入的數據。
OK,屬性我們都知道如何從父級去接收了,那么接下來我們來實現 點擊 操作:
我們先修改 input-control.component.ts 文件
@Component({ …… host: { // 宿主元素 click 事件,觸發 focus() 事件 "(click)": "focus()", // 切換宿主元素 focus 樣式 "[class.focus]": "focused" } })
我們利用了 host 這個屬性,用來給宿主元素對應操作,傳送門 @Component 相關屬性;
我們給宿主元素也就是
修改 input-control.component.ts 文件如下:
@Component({ …… host: { // 宿主元素 click 事件,觸發 focus() 事件 "(click)": "focus()", // 切換宿主元素 focus 樣式 "[class.focus]": "focused" } }) export class InputControlComponent { …… …… private _focusEmitter: EventEmitter= new EventEmitter (); @ViewChild("input") _inputElement: ElementRef; // 組件內部 input 元素 @ViewChild("iconDelete") iconDelete: ElementRef; // 刪除圖標元素 constructor(private hostRef: ElementRef) { } // 監聽全局的點擊事件,如果不是當前 input-control 組,則視為失去焦點操作 @HostListener("window:click", ["$event"]) inputControlBlurHandler(event) { var parent = event.target; // 如何當前節點不是宿主節點,并且不等于 document 節點 while (parent && parent != this.hostRef.nativeElement && parent != document) { // 取當前節點的父節點繼續尋找 parent = parent.parentNode; } // 找到最頂層,則表示已經不在宿主元素內部了,觸發失去焦點 fn if (parent == document) { this._focused = false; } } // 宿主聚焦 focus() { // 觸發下面的 _handleFocus() 事件 this._inputElement.nativeElement.focus(); } // 輸入框聚焦 _handleFocus(event: FocusEvent) { this._focused = true; this._focusEmitter.emit(event); } // 清空輸入值 _handleClear() { this.value = ""; return false; } // 這里觸發 blur 操作,但是不改變 this._focused 的值, // 不然刪除圖標無法實現它的功能, //設置 this._focused 的值將由上面的 @HostListener("window:click", ["$event"]) 來處理 // 觸發父級的 blur 事件 _handleBlur(event: any) { this._onTouchedCallback(); this._blurEmitter.emit(event); } // 對外暴露 focus 事件 @Output("focus") onFocus = this._focusEmitter.asObservable(); …… …… }
在上面的代碼中,我們通過宿主的 focus() 事件,讓 input 元素 focus, 同時 input 元素聚焦之后,會觸發下面的 _handleFocus() 方法,在這個方法里面,我們修改組件自身的 focused 屬性,并對外發射一個 focus 事件,用來向父級傳遞使用。同時,我們的刪除圖標也是根據組件的 focused 屬性切換顯示:
我們的 input 和組件內部的 value 屬性進行了雙向綁定,所以在 _handleClear 之后,我們的輸入框的值自然也就被清空了。
值訪問器 ControlValueAccessor在完成上面的一些步驟之后,我們的組件基本功能完成了,但是接下來還有最重要的一部分內容,那就是讓我們的自定義組件獲得 值訪問 權限。
在官方的文檔中有提到一點 https://github.com/angular/material2/blob/master/src/lib/input/input.ts
在查看官方的文檔之后,我們發現要實現自定義組件的值訪問權限,我們需要繼承 ControlValueAccessor 接口,同時實現它內部的對應的接口
// 要實現雙向數據綁定,這個不可少 export const INPUT_CONTROL_VALUE_ACCESSOR: any = { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => InputControlComponent), multi: true }; const noop = () => { }; @Component({ selector: "input-control", templateUrl: "input-control.component.html", styleUrls: ["input-control.component.scss"], host: { // 宿主元素 click 事件,觸發 focus() 事件 "(click)": "focus()", // 切換宿主元素 focus 樣式 "[class.focus]": "focused" }, // encapsulation: ViewEncapsulation.None, providers: [INPUT_CONTROL_VALUE_ACCESSOR] }) export class InputControlComponent implements ControlValueAccessor { …… …… /** Callback registered via registerOnTouched (ControlValueAccessor) * 此屬性在做表單校驗的時候,不可少, * 如果缺少了這個屬性,FormControl.touched 屬性將監測不到,切記!! */ private _onTouchedCallback: () => void = noop; /** Callback registered via registerOnChange (ControlValueAccessor) */ private _onChangeCallback: (_: any) => void = noop; /** * Write a new value to the element. */ writeValue(value: any) { this._value = value; } /** * Set the function to be called when the control receives a change event. */ registerOnChange(fn: any) { this._onChangeCallback = fn; }; /** * Set the function to be called when the control receives a touch event. */ registerOnTouched(fn: any) { this._onTouchedCallback = fn; } …… …… }
正如上面代碼中所示的一樣,實現了這些對應的接口之后,我們就能像使用普通的 input 元素一樣使用我們的自定義組件了。
允許組件加載內部其它的 DOM 元素回顧我們前面文章開頭的 GIF 圖片,我們還有一個獲取驗證碼的按鈕,同時,我們的錯誤提示也是放在組件內部的。要支持這種形式的,我們需要在組件內部加上
有了這個之后,所有包裹在
父組件調用 input-control:
請輸入驗證碼
瀏覽器渲染之后的的 DOM 結構:
與 FormControl 結合使用注意事項
在后期的時候,我整合了自定輸入組件與 FormControl 一起使用,在使用過程中,發現在需要使用 .touched 特性的時候,發現無法生效,通過查資料發現,如果需要讓這個特性生性,我們的輸入組件必須監聽 blur 事件并且在處理事件中調用觸發對外的 blur 事件,具體代碼見前面的 _handleBlur() 內容。
完整 Demo 地址:mcare-app
這個 Demo 里面整合了路由、子模塊、服務、動態表單等特性的使用方法,有興趣的可以參考下,還在持續完善中。這個 Demo 是參照自己做過的項目部分UI,當然不會涉及核心的業務代碼:)。
Angular2 material2 官方UI庫
CUSTOM FORM CONTROLS IN ANGULAR 2
http://stackoverflow.com/questions/38447681/touched-untouched-not-updating-in-custom-input-component-angular-2
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/81043.html
摘要:構建一個自定義輸入組件今天我們來學習如何正確的構建和一個具有和同樣作用,但同時也具有自己的邏輯的輸入組件。值訪問器在完成上面的一些步驟之后,我們的組件基本功能完成了,但是接下來還有最重要的一部分內容,那就是讓我們的自定義組件獲得值訪問權限。 構建一個自定義 angular2 輸入組件 今天我們來學習如何正確的構建和一個具有和 同樣作用,但同時也具有自己的邏輯的輸入組件。 在讀這篇文章...
摘要:引言是用于構建基于瀏覽器的復雜應用的下一代框架。它涵蓋了的一些基本概念,包括組件模型服務管道傳入傳出以及事件播散等使用方法,并介紹了項目的基本組織結構等。用于雙向綁定,使用來定義,專門用于定義雙向綁定。 引言 Angular2 是 Google 用于構建基于瀏覽器的復雜應用的下一代 MV* 框架。該項目是我學習 Angular2 的入門項目,我覺得它很友好地表達了 Angular2 的...
摘要:為了簡單起見,在本文中將會使用。已經實例化了并且將它的模板載入到了元素中。中的依賴注入發生在該類的構造函數中,因此我們將在構造函數中注入。 國內 Angular2 資料比較少,這里看到一篇不錯的入門文章就分享過來了 —— Angular 2 快速上手,這里面還有很多有關于 Angular2 的文章,感興趣的朋友可以去看一看 目前angular2已經來到了beta版,這意味著它已經做好了...
摘要:當開始使用來提供真正的跨平臺應用時,他發現對的緊耦合的依賴性在用開發應用創建映射時呈現的問題。的重點放在高性能的渲染和執行上,你可以很輕松的創建高性能的跨平臺應用,這些應用可以在相同的代碼庫上運行并且隨意使用特點平臺的組件。 showImg(https://segmentfault.com/img/bVJi8d?w=980&h=400); 在開發階段,跨平臺開發App面臨一個很重要的決...
閱讀 3338·2023-04-26 03:05
閱讀 1458·2019-08-30 13:09
閱讀 1907·2019-08-30 13:05
閱讀 886·2019-08-29 12:42
閱讀 1385·2019-08-28 18:18
閱讀 3446·2019-08-28 18:09
閱讀 512·2019-08-28 18:00
閱讀 1712·2019-08-26 12:10