自定义指令

需求：在表单提交时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

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

 

谈一下implements 和extend

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