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 从if else 到 switch case 再到抽象
Jul 17 Javascript
ie8模式下click无反应点击option无反应的解决方法
Oct 11 Javascript
node中socket.io的事件使用详解
Dec 15 Javascript
Node.js 异步编程之 Callback介绍(一)
Mar 30 Javascript
jQuery实现的表格展开伸缩效果实例
Sep 07 Javascript
Vue2递归组件实现树形菜单
Apr 10 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
Jul 19 Javascript
深入探究angular2 UI组件之primeNG用法
Jul 26 Javascript
基于Jquery Ajax type的4种类型(详解)
Aug 02 jQuery
一次Webpack配置文件的分离实战记录
Nov 30 Javascript
微信小程序(订阅消息)功能
Oct 25 Javascript
Node.js API详解之 dgram模块用法实例分析
Jun 05 Javascript
如何在微信小程序中使用骨架屏的步骤
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面向对象的使用教程 简单数据库连接
2006/11/25 PHP
关于mysql字符集设置了character_set_client=binary 在gbk情况下会出现表描述是乱码的情况
2013/01/06 PHP
Yii框架form表单用法实例
2014/12/04 PHP
Javascript与flash交互通信基础教程
2008/08/07 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
2013/07/04 Javascript
js四舍五入数学函数round使用实例
2014/05/09 Javascript
nodejs教程之制作一个简单的文章发布系统
2014/11/21 NodeJs
谈谈AngularJs中的隐藏和显示
2015/12/09 Javascript
AngularJs定制样式插入到ueditor中的问题小结
2016/08/01 Javascript
教你如何在Node.js中使用jQuery
2016/08/28 Javascript
JS动态添加选项案例分析
2016/10/17 Javascript
详解如何使用webpack+es6开发angular1.x
2017/08/16 Javascript
jQuery实现的弹幕效果完整实例
2017/09/06 jQuery
详解如何使用webpack打包多页jquery项目
2019/02/01 jQuery
JavaScript中var的重要性实例分析
2019/07/09 Javascript
ES11屡试不爽的新特性,你用上了几个
2020/10/21 Javascript
[04:36]DOTA2国际邀请赛 ti3精彩集锦
2013/08/19 DOTA
使用Python抓取模板之家的CSS模板
2015/03/16 Python
python获取本地计算机名字的方法
2015/04/29 Python
python3使用PyMysql连接mysql数据库实例
2017/02/07 Python
简单实现python收发邮件功能
2018/01/05 Python
python  logging日志打印过程解析
2019/10/22 Python
简单了解Django ORM常用字段类型及参数配置
2020/01/07 Python
Python实现Wordcloud生成词云图的示例
2020/03/30 Python
python 获取字典特定值对应的键的实现
2020/09/29 Python
Selenium 配置启动项参数的方法
2020/12/04 Python
PyCharm2020.3.2安装超详细教程
2021/02/08 Python
深入解读CSS3中transform变换模型的渲染
2016/05/27 HTML / CSS
得到Class的三个过程是什么
2012/08/10 面试题
.NET面试问题集
2015/12/08 面试题
优秀通讯员事迹材料
2014/01/28 职场文书
《每逢佳节倍思亲》教后反思
2014/04/19 职场文书
祖国在我心中演讲稿500字
2014/05/04 职场文书
违反学校规则制度检讨书
2015/01/01 职场文书
2015年医德医风工作总结
2015/04/02 职场文书
五一晚会主持词
2015/07/01 职场文书