Angular cdk 學習之 Coercion、Keycodes、Platform
阿新 • • 發佈：2018-12-09
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 | 當前瀏覽器支援的輸入型別(比如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。