cdk(Component Dev Kit)是由material团队开发与维护的。自定义组件的一些小kit。首先不管是啥技术咱们都的先找到官方文档,所以先给出两个官方文档链接cdk npm链接 https://www.npmjs.com/package/@angular/cdk 。cdk文档 https://material.angular.io/cdk/categories。
cdk库里面的功能模块有以下几个部分。我们也会慢慢的对每个功能做详细的说明。
cdk库模块 | 解释 |
---|---|
Coercion | 常用类型转换工具 |
Keycodes | 常用键码 |
Accessibility | 放置一些方便与使用者互动的功能 |
Bidirectionality | 布局方向 |
Drag and Drop | 组件托拽工具类 |
Layout | 响应式布局工具 |
Observers | 监听内容变化 |
Overlay | 处理页面的弹出层 |
Platform | 获取平台信息,以及平台支持的功能 |
Portal | 动态内容呈现 |
Scrolling | 处理滚动 |
Text field | 处理文字的输入 |
Stepper | 类似工作流里面经常用到的分步填写表单 |
Table | 表格 |
Tree | 树 |
今天我们讲cdk里面几个比较简单的功能:Coercion、Keycodes 、Platform 。
一 Coercion
Coercion模块提供了一些类型转换的工具。转number、转boolean、转array、转CSS pixel value。
import {Component, OnInit} from '@angular/core';
import {
_isNumberValue,
coerceArray,
coerceBooleanProperty,
coerceCssPixelValue,
coerceNumberProperty
} from "@angular/cdk/coercion";
@Component({
selector: 'app-cdk-coercion',
templateUrl: './cdk-coercion.component.html',
styleUrls: ['./cdk-coercion.component.less']
})
export class CdkCoercionComponent implements OnInit {
constructor() {
}
ngOnInit() {
// 转boolean
console.log("转boolean: " + coerceBooleanProperty('false'));
// 转number
console.log("转number: " + coerceNumberProperty(10.5));
console.log("是否是number类型: " + coerceNumberProperty('a', this.coerceNumberFallback()));
console.log("是否是number类型: " + _isNumberValue('a'));
// 转数组
console.log("转换为数组: " + coerceArray(1204));
// 转CSS pixel value
console.log("转CSS像素: " + coerceCssPixelValue('10'));
}
/**
* 当转number的时候发生了错误时候的返回值
*/
coerceNumberFallback() {
return 10;
}
}
二 Keycodes
cdk keycodes可以帮助我们快速的判断按下的是键盘上的那个按键。
2.1 Keycodes提供的按键类型
export declare const MAC_ENTER = 3;
export declare const BACKSPACE = 8;
export declare const TAB = 9;
export declare const NUM_CENTER = 12;
export declare const ENTER = 13;
export declare const SHIFT = 16;
export declare const CONTROL = 17;
export declare const ALT = 18;
export declare const PAUSE = 19;
export declare const CAPS_LOCK = 20;
export declare const ESCAPE = 27;
export declare const SPACE = 32;
export declare const PAGE_UP = 33;
export declare const PAGE_DOWN = 34;
export declare const END = 35;
export declare const HOME = 36;
export declare const LEFT_ARROW = 37;
export declare const UP_ARROW = 38;
export declare const RIGHT_ARROW = 39;
export declare const DOWN_ARROW = 40;
export declare const PLUS_SIGN = 43;
export declare const PRINT_SCREEN = 44;
export declare const INSERT = 45;
export declare const DELETE = 46;
export declare const ZERO = 48;
export declare const ONE = 49;
export declare const TWO = 50;
export declare const THREE = 51;
export declare const FOUR = 52;
export declare const FIVE = 53;
export declare const SIX = 54;
export declare const SEVEN = 55;
export declare const EIGHT = 56;
export declare const NINE = 57;
export declare const FF_SEMICOLON = 59;
export declare const FF_EQUALS = 61;
export declare const QUESTION_MARK = 63;
export declare const AT_SIGN = 64;
export declare const A = 65;
export declare const B = 66;
export declare const C = 67;
export declare const D = 68;
export declare const E = 69;
export declare const F = 70;
export declare const G = 71;
export declare const H = 72;
export declare const I = 73;
export declare const J = 74;
export declare const K = 75;
export declare const L = 76;
export declare const M = 77;
export declare const N = 78;
export declare const O = 79;
export declare const P = 80;
export declare const Q = 81;
export declare const R = 82;
export declare const S = 83;
export declare const T = 84;
export declare const U = 85;
export declare const V = 86;
export declare const W = 87;
export declare const X = 88;
export declare const Y = 89;
export declare const Z = 90;
export declare const META = 91;
export declare const MAC_WK_CMD_LEFT = 91;
export declare const MAC_WK_CMD_RIGHT = 93;
export declare const CONTEXT_MENU = 93;
export declare const NUMPAD_ZERO = 96;
export declare const NUMPAD_ONE = 97;
export declare const NUMPAD_TWO = 98;
export declare const NUMPAD_THREE = 99;
export declare const NUMPAD_FOUR = 100;
export declare const NUMPAD_FIVE = 101;
export declare const NUMPAD_SIX = 102;
export declare const NUMPAD_SEVEN = 103;
export declare const NUMPAD_EIGHT = 104;
export declare const NUMPAD_NINE = 105;
export declare const NUMPAD_MULTIPLY = 106;
export declare const NUMPAD_PLUS = 107;
export declare const NUMPAD_MINUS = 109;
export declare const NUMPAD_PERIOD = 110;
export declare const NUMPAD_DIVIDE = 111;
export declare const F1 = 112;
export declare const F2 = 113;
export declare const F3 = 114;
export declare const F4 = 115;
export declare const F5 = 116;
export declare const F6 = 117;
export declare const F7 = 118;
export declare const F8 = 119;
export declare const F9 = 120;
export declare const F10 = 121;
export declare const F11 = 122;
export declare const F12 = 123;
export declare const NUM_LOCK = 144;
export declare const SCROLL_LOCK = 145;
export declare const FIRST_MEDIA = 166;
export declare const FF_MINUS = 173;
export declare const MUTE = 173;
export declare const VOLUME_DOWN = 174;
export declare const VOLUME_UP = 175;
export declare const FF_MUTE = 181;
export declare const FF_VOLUME_DOWN = 182;
export declare const LAST_MEDIA = 183;
export declare const FF_VOLUME_UP = 183;
export declare const SEMICOLON = 186;
export declare const EQUALS = 187;
export declare const COMMA = 188;
export declare const DASH = 189;
export declare const SLASH = 191;
export declare const APOSTROPHE = 192;
export declare const TILDE = 192;
export declare const OPEN_SQUARE_BRACKET = 219;
export declare const BACKSLASH = 220;
export declare const CLOSE_SQUARE_BRACKET = 221;
export declare const SINGLE_QUOTE = 222;
export declare const MAC_META = 224;
关于每个按键对应的含义估计大家一看就会知道
2.2 Keycodes 提供的方法
就提供了一个方法hasModifierKey,判断是否按下了组合键。
declare type ModifierKey = 'altKey' | 'shiftKey' | 'ctrlKey' | 'metaKey';
/**
* 判断是否是按下了组合按钮,比如 alt + c 键
*/
export declare function hasModifierKey(event: KeyboardEvent, ...modifiers: ModifierKey[]): boolean;
2.3 Keycodes 使用
咱们用一个非常简单的例子,来看一下Keycodes的使用
import {Component} from '@angular/core';
import {DELETE, ENTER, hasModifierKey, MAC_ENTER, TAB} from '@angular/cdk/keycodes';
@Component({
selector: 'app-key-codes',
template: `
<input placeholder="keycodes测试" (keyup)="onKeyDown($event)" #input>
`,
styleUrls: ['./cdk-key-codes.component.less']
})
export class CdkKeyCodesComponent {
onKeyDown(event) {
/**
* 组合按键判断(如果按下的是 ctr按键 + 其他的按键的时候 返回true)
*/
console.log(hasModifierKey(event, 'ctrlKey'));
/**
* 打印按键值
*/
console.log(event.keyCode);
/**
* 通过 cdk 判断按键类型
*/
switch (event.keyCode) {
case MAC_ENTER:
case ENTER:
console.log('当前按键: Enter键');
break;
case TAB:
console.log('当前按键: Tab键');
break;
case DELETE:
console.log('当前按键: Delete键');
break;
}
}
}
三 Platform
cdk Platform用于获取当前平台的信息以及当前平台支持的功能。
3.1 Platform提供的module
Platform里面给提供了PlatformModule模块,所以咱们在使用之前的先import PlatformModule模块到我们工程里面来(这也是使用cdk里面Platform里面功能的前提),比如咱们可以在app.module.ts文件里面引入。引入方式如下:
import {PlatformModule} from '@angular/cdk/platform';
@NgModule({
...
imports: [
...,
PlatformModule,
...
],
...
})
export class AppModule {
}
3.2 Platform提供的Service
Platform里面就一个Service,Platform类,用法也是非常的简单。
就一些属性的使用。属性解释如下:
Platform类属性 | 类型 | 解释 |
---|---|---|
ANDROID | boolean | 当前平台是否android系统 |
IOS | boolean | 当前平台是否IOS系统 |
isBrowser | boolean | 当前平台是否浏览器 |
EDGE | boolean | 当前平台是否edge浏览器 |
FIREFOX | boolean | 当前平台是否firefox浏览器 |
SAFARI | boolean | 当前平台是否safari浏览器 |
TRIDENT | boolean | 当前平台浏览器的render engine是否为Microsoft Trident |
WEBKIT | boolean | 当前平台浏览器的render engine是否为Webkit |
BLINK | boolean | 当前平台浏览器的render engine是否为Blink |
3.3 Platform里面提供的方法
Platform模块方法 | 参数 | 返回值 | 解释 |
---|---|---|---|
getSupportedInputTypes | 无 | Set<string> | 当前浏览器支持的输入类型(比如color, button, checkbox, date等) |
supportsPassiveEventListeners | 无 | boolean | 当前浏览器是否支持被动事件监听器 |
normalizePassiveListenerOptions | AddEventListenerOptions | AddEventListenerOptions 或者 boolean | 目前还不清楚是干啥的,待补充 |
supportsScrollBehavior | 无 | boolean | 当前浏览器是否支持滑动行为 |
getRtlScrollAxisType | 无 | RtlScrollAxisType | 获取当前浏览器使用的RTL滚动轴的类型(Chrome的是NORMAL, Firefox和 Safari的是NEGATED, IE和Edge的是INVERTED.) |
3.4 Platform的使用
Platform使用之前先在@NgModule里面imports对应的PlatformModule
通过一个简单的实例来看Platform的使用。
import {Component} from '@angular/core';
import {getSupportedInputTypes, Platform, supportsPassiveEventListeners, supportsScrollBehavior} from '@angular/cdk/platform';
@Component({
selector: 'app-cdk-platform',
template: `
<p>是否 Android: {{platform.ANDROID}}</p>
<p>是否 iOS: {{platform.IOS}}</p>
<p>是否 Firefox: {{platform.FIREFOX}}</p>
<p>是否 Blink: {{platform.BLINK}}</p>
<p>是否 Webkit: {{platform.WEBKIT}}</p>
<p>是否 Trident: {{platform.TRIDENT}}</p>
<p>是否 Edge: {{platform.EDGE}}</p>
<p>是否浏览器: {{platform.isBrowser}}</p>
<p>支持输入的类型: {{supportedInputTypes}}</p>
<p>是否支持被动监听: {{supportsPassiveEventListeners}}</p>
<p>是否支持 scroll 行为: {{supportsScrollBehavior}}</p>
`,
styleUrls: ['./cdk-platform.component.less']
})
export class CdkPlatformComponent {
/**
* 获取支持的输入类型
*/
supportedInputTypes = Array.from(getSupportedInputTypes()).join(', ');
/**
* 是否支持被动事件监听器
*/
supportsPassiveEventListeners = supportsPassiveEventListeners();
/**
* 是否支持滑动行为
*/
supportsScrollBehavior = supportsScrollBehavior();
/**
* Platform Service引入进来
*/
constructor(public platform: Platform) {
}
}
总结:上面咱们就讲了下cdk里面几个比较简单的功能Coercion、Keycodes以及Platform。
网友评论