Angular 学习笔记 ( CDK - Accessibility )

标签：bsp   next   运用   使用   简单的   last   alt   lis   教程   

@angular/ckd 是 ng 对于 ui 组建的基础架构.

是由 material 团队开发与维护的, 之所以会有 cdk 看样子是因为在开发 material 的时候随便抽象一个层次出来给大家用.

这系列是我按照官网教程和查了一下 angular/material 源码的学习笔记.

1. KeyManger 

运用场景是 select, menu 这种有 list options 的组件, 负责处理键盘上下按钮时 option active 的逻辑

ng 提供了 3 个类 ListKeyManager, FocusKeyManager, ActiveDescendantKeyManager, focus 和 active 其实是继承了 ListKeyManager 大体上功能是一样的. 

使用起来是很简单的 : 

chip-list.ts

this._keyManager = new FocusKeyManager<MatChip>(this.chips).withWrap();

实例化时把所以的 options 丢进去, withWrap 表示支持循环, 注意 option 组件要实现 ListKeyManagerOption 接口, 这样 KeyManager 才能设置 active 丫

从 KeyManger 的几个方法就看出它的功能了 源码

Angular 学习笔记 ( CDK - Accessibility )

标签：bsp   next   运用   使用   简单的   last   alt   lis   教程   

原文地址：http://www.cnblogs.com/keatkeat/p/7816676.html