ng-alain的sf如何自定义部件的流程


Posted in Javascript onJune 12, 2020

一、背景

最近使用ng-alain做前端,sf的部件很丰富,但是做起来之后就会发现,多多少少会有一些不符合需求的东西,比如:

ng-alain的sf如何自定义部件的流程

这是一个string的部件,后边跟上一个单位看着很不错,但是我们通常在使用number时会更需要这个单位,然而官方的部件并没有
再比如:

ng-alain的sf如何自定义部件的流程

我想做一个编辑框,要求内容不可编辑,并且该内容要从别的列表进行选择,下拉选择可以满足需求,但是如果内容太多,有时就不方便使用下拉框了,那么这时候我们就需要自定义

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

1、组件的整体结构

ng-alain的sf如何自定义部件的流程

2、首先,组件click-input.component.html,自定义组件要包在sf-item-wrap特殊标签里面

<sf-item-wrap [id]="id" [schema]="schema" [ui]="ui" [showError]="showError" [error]="error" [showTitle]="schema.title">
 <!-- 开始自定义控件区域 -->
 <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>
 <!-- 结束自定义控件区域 -->
</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';

 // 价格区间
 content: any;
 // to: any;

 placeholder: string;  // 使用的时候用来绑定 ui: {placeholder: '请选择业务系统' } 
 inputDisable: boolean; // 使用的时候用来绑定 ui: {inputDisable: true,  // input是否可用}
 btnTitle: string; // 使用的时候用来绑定 ui: {btnTitle: '选择数据',}  按钮名称

 ngOnInit(): void {
  this.placeholder = this.ui.placeholder || '请输入'; // 使用的时候用来绑定 ui: {placeholder: '请选择业务系统' } 
  this.inputDisable = this.ui.inputDisable || false; // 使用的时候用来绑定 ui: {inputDisable: true,  // input是否可用}
  this.btnTitle = this.ui.btnTitle || '按钮'; // 使用的时候用来绑定 ui: {btnTitle: '选择数据',}
 }

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

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

 // reset 可以更好的解决表单重置过程中所需要的新数据问题
 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);  // 可以在组件里直接调用使用ui的配置那里的方法 ui: {click: (value) => this.test(value),}
  }
 }

}

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

涉及到项目内容,以下只展示注册部件的住要内容

// 自定义 小部件
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如何自定义部件的流程

channel-select.component.html

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

channel-select.component.ts

schema: SFSchema = {
  properties: {
   btn: { type: 'string', title: '编辑框+按钮',
    default: '1234', // 设默认值
    ui: {
     widget: 'click-input',
     placeholder: '请选择业务系统',
     // inputDisable: true,  // input是否可用
     btnTitle: '选择数据',
     click: (value) => this.test(value),
    }
   },
  }
 };

总结

到此这篇关于ng-alain的sf如何自定义部件的文章就介绍到这了,更多相关ng-alain的sf如何自定义部件内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Javascript 原型和继承(Prototypes and Inheritance)
Apr 01 Javascript
关于JavaScript的一些看法
May 27 Javascript
jquery 弹出层实现代码
Oct 30 Javascript
获取表单控件原始(初始)值的方法
Aug 21 Javascript
js实现div模拟模态对话框展现URL内容
May 27 Javascript
通过正则表达式获取url中参数的简单实现
Jun 07 Javascript
Node.js使用Express.Router的方法
Nov 14 Javascript
使用vue-cli+webpack搭建vue开发环境的方法
Dec 22 Javascript
详解如何webpack使用DllPlugin
Sep 30 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
May 31 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
Aug 03 Javascript
Vue3中toRef与toRefs的区别
Mar 24 Vue.js
如何在微信小程序中使用骨架屏的步骤
Jun 12 #Javascript
基于Web Audio API实现音频可视化效果
Jun 12 #Javascript
js实现mp3录音通过websocket实时传送+简易波形图效果
Jun 12 #Javascript
学前端,css与javascript重难点浅析
Jun 11 #Javascript
微信小程序 scroll-view的使用案例代码详解
Jun 11 #Javascript
基于ajax及jQuery实现局部刷新过程解析
Sep 12 #jQuery
微信小程序scroll-view实现滚动到锚点左侧导航栏点餐功能(点击种类,滚动到锚点)
Jun 11 #Javascript
You might like
PHP 得到根目录的 __FILE__ 常量
2008/07/23 PHP
Cakephp 执行主要流程
2010/03/24 PHP
php控制linux服务器常用功能 关机 重启 开新站点等
2012/09/05 PHP
ubuntu12.04使用c编写php扩展模块教程分享
2013/12/25 PHP
PHP按行读取文件时删除换行符的3种方法
2014/05/04 PHP
phplot生成图片类用法详解
2015/01/06 PHP
PHP6新特性分析
2016/03/03 PHP
thinkPHP线上自动加载异常与修复方法实例分析
2016/12/01 PHP
escape、encodeURI、encodeURIComponent等方法的区别比较
2006/12/27 Javascript
Javascript的各种节点操作实例演示代码
2012/06/27 Javascript
Jquery:ajax实现翻页无刷新功能代码
2013/08/05 Javascript
JavaScript实现向右伸出的多级网页菜单效果
2015/08/25 Javascript
jQuery实现字体颜色渐变效果的方法
2017/03/29 jQuery
详解webpack打包vue时提取css
2017/05/26 Javascript
基于AngularJS的简单使用详解
2017/09/10 Javascript
laydate日历控件使用方法详解
2017/11/20 Javascript
angular多语言配置详解
2019/05/16 Javascript
vue页面切换项目实现转场动画的方法
2019/11/12 Javascript
python的dict,set,list,tuple应用详解
2014/07/24 Python
仅用500行Python代码实现一个英文解析器的教程
2015/04/02 Python
Python删除windows垃圾文件的方法
2015/07/14 Python
浅谈Python数据类型之间的转换
2016/06/08 Python
Python 生成器,迭代,yield关键字,send()传参给yield语句操作示例
2019/10/12 Python
pytorch .detach() .detach_() 和 .data用于切断反向传播的实现
2019/12/27 Python
灵活运用CSS3特性绘制简易版围棋效果
2016/09/28 HTML / CSS
HTML+CSS3+JS 实现的下拉菜单
2020/11/25 HTML / CSS
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片 功能
2019/07/09 HTML / CSS
舒适的豪华鞋:Taryn Rose
2018/05/03 全球购物
优秀毕业生推荐信
2013/11/02 职场文书
经管应届生求职信
2013/11/17 职场文书
2014年基层党建工作总结
2014/11/11 职场文书
放弃继承权公证书
2015/01/23 职场文书
个人思想政治总结
2015/03/05 职场文书
工厂门卫岗位职责
2015/04/13 职场文书
2019年浪漫婚礼证婚词
2019/06/27 职场文书
golang 实现并发求和
2021/05/08 Golang