本文主要示例在ionic3.x環境下實現一個自定義計數器,實現後最終效果如圖:html
一、使用命令建立一個componentios
ionic g component CounterInput
相似的命令還有:數組
ionic g page YourPageName //建立新頁面 ionic g directive YourPageName //建立指令 ionic g component YourComponentName //建立組件 ionic g provider YourProviderName //建立服務 ionic g pipe YourPipeName //建立過濾器
命令執行完成後自動生成文件如圖:app
二、到這裏咱們已經初步建立了一個自定義組件,接上來咱們須要將咱們的組件添加到app.module.ts的declarations數組裏,以便其實頁面進行調用。通常狀況下咱們執行完命令ionic已經自動幫咱們添加進來了,但若是沒有的話請自行添加。代碼以下:ionic
import { CounterInputComponent } from '../components/counter-input/counter-input';
.....
@NgModule({
declarations: [
...
CounterInputComponent
...
],
imports: [
...
三、接下來咱們具體實現ide
counter-input.html 頁面代碼以下:this
<ion-icon class="add" name="ios-remove-circle-outline" (click)='decrement()'></ion-icon> <ion-input type="number" value="1" [(ngModel)]='counterValue'></ion-input> <ion-icon class="min" name="ios-add-circle-outline" (click)='increment()'></ion-icon>
counter-input.ts 頁面代碼以下:spa
import { Component, Input, forwardRef } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms' @Component({ selector: 'counter-input', templateUrl: 'counter-input.html', providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CounterInputComponent), multi: true }] }) export class CounterInputComponent implements ControlValueAccessor { @Input() counterValue: number; private propagateChange: any = {}; increment() { this.counterValue++; this.propagateChange(this.counterValue);//值傳遞 } decrement() { this.counterValue--; this.propagateChange(this.counterValue);//值傳遞 } /*實現ControlValueAccessor接口部分*/ writeValue(val: number): void { if (val) { this.counterValue = val; } } registerOnChange(fn: any): void { this.propagateChange = fn; } registerOnTouched(fn: any): void { } setDisabledState?(isDisabled: boolean): void { } }
四、到這裏咱們的自定義控件已經實現完了,下面是調用雙向綁定
<counter-input [(ngModel)]='counterValue'></counter-input>
總結:爲了使自定義組件實現雙向綁定(頁面的傳能夠傳遞到組件,組件將值修改後又傳遞到頁面),咱們實現了ControlValueAccessor接口,實現完ControlValueAccessor接口後咱們能夠在調用組件的時候直接使用ngModel進行雙向綁定。code
參考文檔:
https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html
http://www.jianshu.com/p/a01015d5d83b