angular

Angular cdk 学习之 Coercion、Keycode

2018-12-09  本文已影响7人  tuacy

       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学习过程中所有实例连接

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

上一篇 下一篇

猜你喜欢

热点阅读