[angular] CDK之coercion 强类型转换

Angular CDK coercion 是一些组件常用到的工具函数

coerceBooleanProperty

把一个数据绑定值（通常是一个字符串）强制转换为布尔值，通常用在@Input输入值

// 可以将输入值为空 （''）转为true 把值为false字符串转为false
export function coerceBooleanProperty(value: any): boolean {
  return value != null && `${value}` !== 'false';
}

可以在只写绑定属性下将值空转换成true, 方便使用

coerceNumberProperty

将一个数据强制转换为数字

/** 强制转换将数据转换为数字，不是数字就返回默认值 0 ，默认值也可以自己设置. */
export function coerceNumberProperty(value: any): number;
export function coerceNumberProperty<D>(value: any, fallback: D): number | D;
export function coerceNumberProperty(value: any, fallbackValue = 0) {
  return _isNumberValue(value) ? Number(value) : fallbackValue;
}

/**
 * 验证一个值是不为数字
 */
export function _isNumberValue(value: any): boolean {
  return !isNaN(parseFloat(value as any)) && !isNaN(Number(value));
}

数字类型容错处理

coerceArray

将一个数据强制转换为数组

export function coerceArray<T>(value: T | T[]): T[];
export function coerceArray<T>(value: T | readonly T[]): readonly T[];
export function coerceArray<T>(value: T | T[]): T[] {
  return Array.isArray(value) ? value : [value];
}

将数据转换成数组，便于数据统一迭代处理，也可以灵活使用参数

coerceElement

把 ElementRef 或 Element 强制转换成一个 element

import {ElementRef} from '@angular/core';
export function coerceElement<T>(elementOrRef: ElementRef<T> | T): T {
  return elementOrRef instanceof ElementRef ? elementOrRef.nativeElement : elementOrRef;
}

这对于可同时接受元素引用或 native 元素本身的 API 很有用

coerceCssPixelValue

强制将数值转换成css的像素

export function coerceCssPixelValue(value: any): string {
  if (value == null) {
    return '';
  }

  return typeof value === 'string' ? value : `${value}px`;
}

总结

这个cdk 每个函数都有很强的针对性，有自己在组件中合适的使用场景，虽然实现很容易