一、背景

最近使用ng-alain做前端源内，sf的部件很豐富葡粒，但是做起來之后就會發(fā)現(xiàn)，多多少少會有一些不符合需求的東西膜钓，比如：

file

這是一個(gè)string的部件嗽交，后邊跟上一個(gè)單位看著很不錯，但是我們通常在使用number時(shí)會更需要這個(gè)單位颂斜，然而官方的部件并沒有
再比如：

file

二糯彬、自定義ng-alain部件的流程

1、組件的整體結(jié)構(gòu)

file

2葱她、首先撩扒，組件click-input.component.html，自定義組件要包在sf-item-wrap特殊標(biāo)簽里面

<sf-item-wrap [id]="id" [schema]="schema" [ui]="ui" [showError]="showError" [error]="error" [showTitle]="schema.title">
  <!-- 開始自定義控件區(qū)域 -->
  <div nz-row>
    <div nz-col nzSpan="16"><input type="text" [placeholder]="placeholder" nz-input [(ngModel)]="content" [disabled]="inputDisable" (ngModelChange)="onChange()"></div>
    <div nz-col nzSpan="2" nzPush="2"></div>
    <div nz-col nzSpan="6"><button nz-button type="button" nzType="primary" (click)="test()" >{{btnTitle}}</button></div>
  </div>
  <!-- 結(jié)束自定義控件區(qū)域 -->
</sf-item-wrap>

3吨些、寫組件click-input.component搓谆，繼承ControlWidget

import {Component, OnInit} from '@angular/core';
import { ControlWidget } from '@delon/form';

@Component({
  selector: 'app-product-widget-click-input',
  templateUrl: './click-input.component.html',
})
export class ClickInputComponent extends ControlWidget implements OnInit {

  /* 用于注冊小部件 KEY 值 */
  static readonly KEY = 'click-input';

  // 價(jià)格區(qū)間
  content: any;
  // to: any;

  placeholder: string;   // 使用的時(shí)候用來綁定  ui: {placeholder: '請選擇業(yè)務(wù)系統(tǒng)' } 
  inputDisable: boolean; // 使用的時(shí)候用來綁定 ui: {inputDisable: true,   // input是否可用}
  btnTitle: string;  // 使用的時(shí)候用來綁定 ui: {btnTitle: '選擇數(shù)據(jù)',}   按鈕名稱

  ngOnInit(): void {
    this.placeholder = this.ui.placeholder || '請輸入';  // 使用的時(shí)候用來綁定  ui: {placeholder: '請選擇業(yè)務(wù)系統(tǒng)' } 
    this.inputDisable = this.ui.inputDisable || false;  // 使用的時(shí)候用來綁定 ui: {inputDisable: true,   // input是否可用}
    this.btnTitle = this.ui.btnTitle || '按鈕';  // 使用的時(shí)候用來綁定 ui: {btnTitle: '選擇數(shù)據(jù)',}
  }

  getData = () => {
    return this.content;
  }

  onChange() {
    const v = this.getData();
    this.setValue(v);
  }

  // reset 可以更好的解決表單重置過程中所需要的新數(shù)據(jù)問題
  reset(value: any) {
    if (value) {
      console.log(value);
      const content = value;
      this.content = content;
      // this.to = to;
      this.setValue(value);
    }

  }

  test(value?: string){
    if (this.ui.click) {
      this.ui.click(value);   // 可以在組件里直接調(diào)用使用ui的配置那里的方法  ui: {click: (value) => this.test(value),}
    }
  }

}

4、在shared.module.ts中注冊部件

涉及到項(xiàng)目內(nèi)容豪墅，以下只展示注冊部件的住要內(nèi)容

// 自定義 小部件
const WIDGETS = [
  RangeInputComponent,
  ClickInputComponent
];

@NgModule({
  declarations: [
    // your components
    ...COMPONENTS,
    ...DIRECTIVES,
    ...WIDGETS
  ],
})

export class SharedModule {
  constructor(widgetRegistry: WidgetRegistry) {
    // 注冊 自定義的 widget
    for (const widget of WIDGETS){
      widgetRegistry.register(widget.KEY /* 'range-input' */, widget);
    }
  }
}

5泉手、使用自定義部件

file

channel-select.component.html

<sf [schema]="schema" (formSubmit)="submit($event)"></sf>

channel-select.component.ts

schema: SFSchema = {
   properties: {
     btn: { type: 'string', title: '編輯框+按鈕',
       default: '1234', // 設(shè)默認(rèn)值
       ui: {
         widget: 'click-input',
         placeholder: '請選擇業(yè)務(wù)系統(tǒng)',
         // inputDisable: true,   // input是否可用
         btnTitle: '選擇數(shù)據(jù)',
         click: (value) => this.test(value),
       }
     },
   }
 };

個(gè)人博客 蝸牛