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

需求&＃xff1a;在表单提交时text&＃61;"number"的输入框必须以两位小数点显示&＃xff0c;即输入10 &＃61;> 10.00&＃xff0c; 10.1234 &＃61;> 10.12。

难点&＃xff1a;双向数据绑定[(ngModal)]&＃61;"value"&＃xff0c;不支持对值的操作&＃xff0c;即不能使用管道去控制。

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

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

HTML

必须传入模板变量#ipt

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

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

这是typeScript的结构方法&＃xff1a;   ({title: string, name: string}) &＃61;> {}

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

这里就不解释解构是什么&＃xff0c;TS官网更详尽。

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

let data &＃61; {name: &＃39;name&＃39;, age: 10};
// 我一直以为这样就可以定义接口&＃xff0c;对data作简单过滤
let obj: {name} &＃61; data;

解构基本用法

let {name, age} &＃61; {name: &＃39;hu&＃39;, age: 10};/*结果
name &＃61;> &＃39;hu&＃39;
age &＃61;> 10
*/

接口基本用法

interface person {name: string,age: number
}let fn &＃61; function(obj: person): void{console.log(obj);
}fn({name: &＃39;hu&＃39;, age: 10, sex: &＃39;male&＃39;}); // {name: &＃39;hu&＃39;, age: 10} 过滤了sex


误区&＃xff1a;不要以为{xxx,  xxx}就是接口&＃xff0c;像例子1&＃xff0c;是JS的赋值操作&＃xff0c;并没有什么过滤控制&＃xff0c;最常见的接口过滤就是在方法中传参数&＃xff0c;才能过滤。赋值操作并不能达到过滤效果。

谈一下implements 和extend

Renderer2抽象类提供的属性和方法