自定義組件的基本結構

import { Component, OnInit,  forwardRef } from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

@Component({
  selector: 'sg-photo-view',
  templateUrl: 'photo-view.component.html',
  providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => PhotoViewComponent), multi: true, }],
})
export class PhotoViewComponent implements OnInit, ControlValueAccessor {

  private propagateChange = (_: any) => { };

  imgs: string[];

  constructor(

  ) { }

  ngOnInit() {
  }

  /**
   * 給外部formControl寫入數據
   * 
   * @param {*} value 
   */
  writeValue(value: any) {
    if (value != undefined) {
      if (value instanceof Array) {
        this.imgs = value;
      } else {
        this.imgs = [value];
      }
    }
  }

  /**
   * 把外面登記的監測change的函數賦值給this.propagateChange
   * 當內部數據改變時,可使用this.propagateChange(this.imgs)去觸發傳遞出去
   * @param {*} fn 
   */
  registerOnChange(fn: any) {
    this.propagateChange = fn;
  }

  /**
   * 也是一樣注冊,當 touched 然后調用
   * @param {*} fn 
   */
  registerOnTouched(fn:any) { }

  /**
   * 內部更改例子
   * @param {*} fn 
   */
  inSideChange(){
    this.imgs.push(1);
    this.propagateChange(this.imgs)//去觸發外部監控的函數
  }
}

使用

<sg-photo-view  formControlName="binding"
              ></sg-photo-view> //響應式表單

<sg-photo-view   [(ngModel)]="binding" name = "some"
              ></sg-photo-view> // 模板驅動表單

參考

• 官網API
• 博客1
• 博客2

如果覺得文章對你有點用的話，麻煩拿出手機，這里有一個你我都有的小福利（每天一次）： 打開支付寶首頁搜索“8601304”，即可領紅包。謝謝支持