美文网首页angular
Angular cdk 学习之 Coercion、Keycode

Angular cdk 学习之 Coercion、Keycode

作者: tuacy | 来源:发表于2018-12-09 13:26 被阅读7次

           cdk(Component Dev Kit)是由material团队开发与维护的。自定义组件的一些小kit。首先不管是啥技术咱们都的先找到官方文档,所以先给出两个官方文档链接cdk npm链接 https://www.npmjs.com/package/@angular/cdkcdk文档 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学习过程中所有实例连接

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

    相关文章

      网友评论

        本文标题:Angular cdk 学习之 Coercion、Keycode

        本文链接:https://www.haomeiwen.com/subject/zfjqhqtx.html