Angular 学习笔记 ( CDK - Accessibility )

更新 : 2019-11-29

在使用 focus monitor 的时候要小心,

Expression has changed after it was checked 错误

原因是因为 focus monitor 监听的方式是 runOutsideAngular + list focus or blur

举个例子, 比如当我们触发一些事件后，修改属性，detech change,这个时候 ng 去渲染 element

比如删除 element, 这时 monitor 监听的 blur 就可能会被触发. 触发后就会马上调用我们的监听。

而如果我们的监听写了一些操作属性...markforcheck 的代码...boom

因为渲染过程还没有结束. 所以正确的方式是, 做一个延迟. 比如 settimeout, promise.relsove

确保渲染 ok 了才操作. 我觉得一个大原因是 monitor 用了 outside angular 所以这个 life cycle 我们就得自己留心了。

更新: 2019-11-21

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

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

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

1. KeyManger

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

Angular 学习笔记 ( CDK - Accessibility )

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

使用起来是很简单的 :

chip-list.ts

@ContentChildren(MatChip) chips: QueryList<MatChip>;

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

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

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

setActiveItem(index: number)

onKeydown(event: KeyboardEvent) 外面负责监听然后传入 $event

setFirstItemActive()

setLastItemActive()

setNextItemActive()

setPreviousItemActive()

2. FocusTrap

<div class="my-inner-dialog-content" cdkTrapFocus>

  <!-- Tab and Shift + Tab will not leave this element. -->

</div>

如果我们一直按 tab 游览器会一直 focus to 下一个 element 游览器的地址上都可以 tab 到去.

那么设置了这个 focustrap 不管你怎么 tab 都走不出这个框框了.

Angular 学习笔记 ( CDK - Accessibility )

ng 通过在这个 element 上下个别添加一个 focus element 来做出限制. 一旦 tab 到了下方的 element ng 就会 focus to 第一个 tabable 元素.

而如果和能找到第一个 tabable 元素呢？那就是下一个要介绍的了

3. InteractivityChecker

这个能让我们检查到一个 element 是否 disabled, visible, tabbable, and focusable. 实现手法都是大量的游览器 dom api 等等, 而且也考虑了兼容性等等场景.

4. FocusMonitor

这个可以让我们检查到一个 element 被 focus 时是因为什么原因.

export type FocusOrigin = 'touch' | 'mouse' | 'keyboard' | 'program' | null;

有以上 5 种, origin 就是起源的意思. 有些交互设计会依据不同的 focus 方式不同的处理.

5. LiveAnnouncer

这是个 service, 用于 append 一个内容在 body, 做 aria 才会用到.

上面可以看出 CDK 对于开发来说最大的好处是避免了大量的 dom api 操作和游览器兼容. 在开发自己的 ui 组件尤其重要.

秒客网