Angular cdk 学习之 Coercion、Keycodes、Platform

- 日理万妓 2022-04-05 20:19 255阅读 0赞

cdk(Component Dev Kit)是由material团队开发与维护的。自定义组件的一些小kit。首先不管是啥技术咱们都的先找到官方文档，所以先给出两个官方文档链接[cdk npm链接][cdk npm] [https://www.npmjs.com/package/@angular/cdk][cdk npm] 。[cdk文档][cdk] [https://material.angular.io/cdk/categories。][https_material.angular.io_cdk_categories]

cdk库里面的功能模块有以下几个部分。我们也会慢慢的对每个功能做详细的说明。

<table> 
 <thead> 
  <tr> 
   <th>cdk库模块</th> 
   <th>解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Coercion</td> 
   <td>常用类型转换工具</td> 
  </tr> 
  <tr> 
   <td>Keycodes</td> 
   <td>常用键码</td> 
  </tr> 
  <tr> 
   <td>Accessibility</td> 
   <td>放置一些方便与使用者互动的功能</td> 
  </tr> 
  <tr> 
   <td>Bidirectionality</td> 
   <td>布局方向</td> 
  </tr> 
  <tr> 
   <td>Drag and Drop</td> 
   <td>组件托拽工具类</td> 
  </tr> 
  <tr> 
   <td>Layout</td> 
   <td>响应式布局工具</td> 
  </tr> 
  <tr> 
   <td>Observers</td> 
   <td>监听内容变化</td> 
  </tr> 
  <tr> 
   <td>Overlay</td> 
   <td>处理页面的弹出层</td> 
  </tr> 
  <tr> 
   <td>Platform</td> 
   <td>获取平台信息，以及平台支持的功能</td> 
  </tr> 
  <tr> 
   <td>Portal</td> 
   <td>动态内容呈现</td> 
  </tr> 
  <tr> 
   <td>Scrolling</td> 
   <td>处理滚动</td> 
  </tr> 
  <tr> 
   <td>Text field</td> 
   <td>处理文字的输入</td> 
  </tr> 
  <tr> 
   <td>Stepper</td> 
   <td>类似工作流里面经常用到的分步填写表单</td> 
  </tr> 
  <tr> 
   <td>Table</td> 
   <td>表格</td> 
  </tr> 
  <tr> 
   <td>Tree</td> 
   <td>树</td> 
  </tr> 
 </tbody> 
</table>

今天我们讲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类，用法也是非常的简单。  
就一些属性的使用。属性解释如下:

<table> 
 <thead> 
  <tr> 
   <th>Platform类属性</th> 
   <th>类型</th> 
   <th>解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>ANDROID</td> 
   <td>boolean</td> 
   <td>当前平台是否android系统</td> 
  </tr> 
  <tr> 
   <td>IOS</td> 
   <td>boolean</td> 
   <td>当前平台是否IOS系统</td> 
  </tr> 
  <tr> 
   <td>isBrowser</td> 
   <td>boolean</td> 
   <td>当前平台是否浏览器</td> 
  </tr> 
  <tr> 
   <td>EDGE</td> 
   <td>boolean</td> 
   <td>当前平台是否edge浏览器</td> 
  </tr> 
  <tr> 
   <td>FIREFOX</td> 
   <td>boolean</td> 
   <td>当前平台是否firefox浏览器</td> 
  </tr> 
  <tr> 
   <td>SAFARI</td> 
   <td>boolean</td> 
   <td>当前平台是否safari浏览器</td> 
  </tr> 
  <tr> 
   <td>TRIDENT</td> 
   <td>boolean</td> 
   <td>当前平台浏览器的render engine是否为Microsoft Trident</td> 
  </tr> 
  <tr> 
   <td>WEBKIT</td> 
   <td>boolean</td> 
   <td>当前平台浏览器的render engine是否为Webkit</td> 
  </tr> 
  <tr> 
   <td>BLINK</td> 
   <td>boolean</td> 
   <td>当前平台浏览器的render engine是否为Blink</td> 
  </tr> 
 </tbody> 
</table>

## 3.3 Platform里面提供的方法 ##

<table> 
 <thead> 
  <tr> 
   <th>Platform模块方法</th> 
   <th>参数</th> 
   <th>返回值</th> 
   <th>解释</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>getSupportedInputTypes</td> 
   <td>无</td> 
   <td>Set</td> 
   <td>当前浏览器支持的输入类型(比如color, button, checkbox, date等)</td> 
  </tr> 
  <tr> 
   <td>supportsPassiveEventListeners</td> 
   <td>无</td> 
   <td>boolean</td> 
   <td>当前浏览器是否支持被动事件监听器</td> 
  </tr> 
  <tr> 
   <td>normalizePassiveListenerOptions</td> 
   <td>AddEventListenerOptions</td> 
   <td>AddEventListenerOptions 或者 boolean</td> 
   <td>目前还不清楚是干啥的，待补充</td> 
  </tr> 
  <tr> 
   <td>supportsScrollBehavior</td> 
   <td>无</td> 
   <td>boolean</td> 
   <td>当前浏览器是否支持滑动行为</td> 
  </tr> 
  <tr> 
   <td>getRtlScrollAxisType</td> 
   <td>无</td> 
   <td>RtlScrollAxisType</td> 
   <td>获取当前浏览器使用的RTL滚动轴的类型(Chrome的是NORMAL, Firefox和 Safari的是NEGATED, IE和Edge的是INVERTED.)</td> 
  </tr> 
 </tbody> 
</table>

## 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学习过程中所有实例连接][cdk 1]

总结：上面咱们就讲了下cdk里面几个比较简单的功能Coercion、Keycodes以及Platform。

[cdk npm]: https://www.npmjs.com/package/@angular/cdk
[cdk]: https://material.angular.io/cdk/categories
[https_material.angular.io_cdk_categories]: https://material.angular.io/cdk/categories%E3%80%82
[cdk 1]: https://github.com/tuacy/angular-cdk-study