溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

ng-alain的sf實(shí)現(xiàn)自定義部件的流程方法

發(fā)布時間：2020-06-23 11:36:53 來源：億速云 閱讀：387 作者：清晨 欄目：web開發(fā)

這篇文章將為大家詳細(xì)講解有關(guān)ng-alain的sf實(shí)現(xiàn)自定義部件的流程方法，小編覺得挺實(shí)用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

一、背景

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

ng-alain的sf實(shí)現(xiàn)自定義部件的流程方法

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

ng-alain的sf實(shí)現(xiàn)自定義部件的流程方法

我想做一個編輯框，要求內(nèi)容不可編輯，并且該內(nèi)容要從別的列表進(jìn)行選擇，下拉選擇可以滿足需求，但是如果內(nèi)容太多，有時就不方便使用下拉框了，那么這時候我們就需要自定義

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

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

ng-alain的sf實(shí)現(xiàn)自定義部件的流程方法

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';

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

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

 ngOnInit(): void {
  this.placeholder = this.ui.placeholder || '請輸入'; // 使用的時候用來綁定 ui: {placeholder: '請選擇業(yè)務(wù)系統(tǒng)' } 
  this.inputDisable = this.ui.inputDisable || false; // 使用的時候用來綁定 ui: {inputDisable: true,  // input是否可用}
  this.btnTitle = this.ui.btnTitle || '按鈕'; // 使用的時候用來綁定 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&#63;: 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、使用自定義部件

ng-alain的sf實(shí)現(xiàn)自定義部件的流程方法

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),
    }
   },
  }
 };

關(guān)于ng-alain的sf實(shí)現(xiàn)自定義部件的流程方法就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，可以學(xué)到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手