Angular Material 17+ 高級教程 – CDK Accessibility の ListKeyManager

介紹

ListKeyManager 的作用是讓我們通過 keyboard 去操作 List Items。

一個典型的例子：Menu

有 4 個步驟：

1. tab to menu

2. enter 打開 menu list

3. 按上下鍵選擇 item

4. enter 選中 item

ListKeyManager 主要是負責第三個步驟，按上下鍵的功能。

 

ListKeyManager，ActiveDescendantKeyManager，FocusKeyManager

ListKeyManager 只是一個普通的 class，它不是 Dependency injection Provider 哦，所以使用它的方式是 new ListKeyManager()。

ActiveDescendantKeyManager 是 ListKeyManager 的派生類，它也沒有什麼特別的，只是重載了 ListKeyManager 的一個方法而已

從方法名字可以猜得出來，在按上下鍵時，target item 會被 set active styles。

FocusKeyManager 也是 ListKeyManager 的派生類

從方法名字可以猜得出來，在按上下鍵時，target item 會被 focus。

總結：

1. 主要處理上下鍵核心功能的是 ListKeyManager

2. ActiveDescendantKeyManager 只是多了一個 set item active styles 而已

3. FocusKeyManager 只是多了一個 focus item 而已

 

ListKeyManager

我們直接看代碼學習吧，畢竟它的原理太簡單了。

初始化 ListKeyManager

 

初始化 ListKeyManager 需要傳入 item list，它可以是一個 QueryList 或者 Array。

提醒：這個接口目前 v17.3.0 還沒有跟上 Angular 新潮流 -- Signal。QueryList 在 Signal-based Query 中已經不公開了，我們根本拿不到 QueryList。

相關 Github Issue – ListKeyManager: Support Signal-based Query。對 Query 不熟悉的朋友，可以看這篇 Angular 17+ 高級教程 – Component 組件 の Query Elements。

另外，list item 必須是一個對象，同時實現 ListKeyManagerOption 接口。

下面我會用 ActiveDescendantKeyManager 作爲例子，所以我們也看看 ActiveDescendantKeyManager 的 constructor。

item 必須實現 Highlightable 接口。

好，搞清除類型後，我們來初始化一個 ActiveDescendantKeyManager。

下面這個是 Item class，它依要求實現了 Highlightable 接口。

class Item implements Highlightable {
  active = false;
  setActiveStyles(): void {
    this.active = true;
  }
  setInactiveStyles(): void {
    this.active = false;
  }
}

初始化 ActiveDescendantKeyManager

export class AppComponent {
  constructor() {
    // 1. 創建 Item List
    const items = [new Item(), new Item(), new Item(), new Item()];

    // 2. 初始化 ActiveDescendantKeyManager
    const keyManager = new ActiveDescendantKeyManager(items);
  }
}

setActiveItem

通過 ListKeyManager 的一些方法，我們可以選擇 active item

console.log(items[0].active); // false
keyManager.setFirstItemActive();
console.log(items[0].active); // true

調用 setFirstItemActive，它內部會執行 items[0].setActiveStyles，所以 items[0].active 就變成 true 了。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

目錄

上一篇 Angular Material 17+ 高級教程 – CDK Accessibility の Focus

下一篇 TODO

想查看目錄，請移步 Angular 17+ 高級教程 – 目錄