自定义指令控制两位小数显示，接口Interface和TS解构

最新推荐文章于 2024-06-17 14:50:04 发布

weixin_33686714

最新推荐文章于 2024-06-17 14:50:04 发布

阅读量421

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/2949632/blog/1501655

版权

2019独角兽企业重金招聘Python工程师标准>>>

自定义指令

需求：在表单提交时text="number"的输入框必须以两位小数点显示，即输入10 => 10.00， 10.1234 => 10.12。

难点：双向数据绑定[(ngModal)]="value"，不支持对值的操作，即不能使用管道去控制。

then，下面的自定义指令customDecimal是通过获取元素本身的value进行操作，再赋值回给元素本身实现

import { Directive, Input, ElementRef, Renderer2, AfterViewInit } from '@angular/core';
import { CommonModule, DecimalPipe } from "@angular/common";

@Directive({
    selector: '[customDecimal]'
})
export class DecimalDirective implements AfterViewInit {
    // 括号里是dom输入的名字，括号后面是别名，方便操作而已
    @Input('customDecimal')
    customDecimal: any;
    
    // el,获取该元素集合,rd2,dom的方法属性集合（Renderer没有监听事件）,decimalPipe,小数管道
    constructor(public el: ElementRef, public rd2: Renderer2, public decimalPipe: DecimalPipe) {
    }
    
    ngAfterViewInit() {
        // listen为angular封装的一些操作dom的集合，详情看对应的接口
        this.rd2.listen(this.el.nativeElement, 'blur', (e) => {
            let v = e.srcElement.value;
            if (v && +v) {
                // 这里的this指的是DecimalDirective指令,要获得指令控制的元素必须让dom传一个模板变量进来
                let value = this.customDecimal.value;
                value = this.decimalPipe.transform(v, '1.2-2');
                // 由于number类型的输入框，在输入3位整数以上会出现逗号
                // 管道转换3位整数以上会出现逗号分隔
                this.customDecimal.value = Array.from(value).map((val, i) => {
                    return (val === ',') ? '' : val;
                }).join('');
            } else {
                return;
            }
        })
    }
}

HTML

必须传入模板变量#ipt

<input #ipt type="number" id="name" class="form-control" formControlName="name" [customDecimal]="ipt">

---------------

接口Interface

接口是强控制对象属性，像结构语法，VO只是一个对象用来方便对接

这是typeScript的结构方法： ({title: string, name: string}) => {}

实际传进来的参数对象不止title 和 name两个属性，但ts只会描述这两个属性，其他忽略，这就是接口的作用，固化对象属性值。

TS中的解构和接口是两码事

这里就不解释解构是什么，TS官网更详尽。

刚开始接触解构和接口的时候，老是想尝试用解构或者接口搞一番优秀代码，但自己理解错误，老认为解构就是接口的写法，也是可以达到过滤数据的。像例子1

let data = {name: 'name', age: 10};
// 我一直以为这样就可以定义接口，对data作简单过滤
let obj: {name} = data;

解构基本用法

let {name, age} = {name: 'hu', age: 10};

/*结果
name  =>  'hu'
age  => 10
*/

接口基本用法

interface person {
  name: string,
  age: number
}

let fn = function(obj: person): void{
  console.log(obj);
}

fn({name: 'hu', age: 10, sex: 'male'}); // {name: 'hu', age: 10} 过滤了sex