ionic3.x angular4.x ng4.x 自定義元件component雙向繫結之自定義計數器

eedc發表於2017-07-14
Angular元件

本文主要示例在ionic3.x環境下實現一個自定義計數器，實現後最終效果如圖：

 

1、使用命令建立一個component

ionic g component CounterInput

類似的命令還有：

ionic g page YourPageName //建立新頁面
ionic g directive YourPageName //建立指令
ionic g component YourComponentName //建立元件
ionic g provider YourProviderName //建立服務
ionic g pipe YourPipeName //建立過濾器

命令執行完成後自動生成檔案如圖：

2、到這裡我們已經初步建立了一個自定義元件，接上來我們需要將我們的元件新增到app.module.ts的declarations陣列裡，以便其實頁面進行呼叫。一般情況下我們執行完命令ionic已經自動幫我們新增進來了，但如果沒有的話請自行新增。程式碼如下：

import { CounterInputComponent } from '../components/counter-input/counter-input';

.....

@NgModule({
  declarations: [
...
    CounterInputComponent
...
  ],
  imports: [
...

3、接下來我們具體實現

counter-input.html 頁面程式碼如下：

<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 頁面程式碼如下：

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 {
  }

}

4、到這裡我們的自定義控制元件已經實現完了，下面是呼叫

<counter-input [(ngModel)]='counterValue'></counter-input>

總結：為了使自定義元件實現雙向繫結（頁面的傳可以傳遞到元件，元件將值修改後又傳遞到頁面），我們實現了ControlValueAccessor介面，實現完ControlValueAccessor介面後我們可以在呼叫元件的時候直接使用ngModel進行雙向繫結。

參考文件：

https://blog.thoughtram.io/angular/2016/07/27/custom-form-controls-in-angular-2.html

http://www.jianshu.com/p/a01015d5d83b

 

相關文章