如何在Angular中创建键盘快捷键？如实现Ctrl+T增大网站字号

代码编写位置 #

推荐在**根组件（如AppComponent）**中实现，确保快捷键在整个应用内生效；若仅需特定组件内可用，可将代码放在对应组件中。

实现步骤与代码示例 #

1. 基础实现（直接修改body字号） #

在app.component.ts中添加键盘事件监听与字号调整逻辑：

import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  private baseFontSize = 16; // 初始字号，单位px

  @HostListener('document:keydown', ['$event'])
  handleKeyDown(event: KeyboardEvent): void {
    // 匹配 Ctrl+T（Mac 下为 Cmd+T）
    if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 't') {
      event.preventDefault(); // 阻止浏览器默认的「新建标签页」行为
      this.baseFontSize += 2; // 每次增大2px，可按需调整步长
      document.body.style.fontSize = `${this.baseFontSize}px`;
    }
  }
}

2. 更优雅的CSS变量实现 #

若应用多处依赖字号，建议用CSS全局变量统一管理：

• 在全局样式文件（如styles.scss）中定义变量：

:root {
  --base-font-size: 16px;
}

body {
  font-size: var(--base-font-size);
}

// 其他元素可通过变量关联字号
h1 {
  font-size: calc(var(--base-font-size) * 2);
}

• 修改AppComponent逻辑，更新CSS变量：

// 替换之前的document.body.style.fontSize行
document.documentElement.style.setProperty('--base-font-size', `${this.baseFontSize}px`);

额外优化：添加减小字号快捷键 #

扩展逻辑支持Ctrl+Shift+T减小字号：

@HostListener('document:keydown', ['$event'])
handleKeyDown(event: KeyboardEvent): void {
  const isCtrlOrCmd = event.ctrlKey || event.metaKey;
  if (isCtrlOrCmd && event.key.toLowerCase() === 't') {
    event.preventDefault();
    if (event.shiftKey) {
      // 限制最小字号避免过小
      this.baseFontSize = Math.max(12, this.baseFontSize - 2);
    } else {
      this.baseFontSize += 2;
    }
    document.documentElement.style.setProperty('--base-font-size', `${this.baseFontSize}px`);
  }
}

关键注意事项 #

• 必须调用event.preventDefault()：否则浏览器默认的Ctrl+T新建标签页行为会覆盖自定义逻辑。
• 跨平台兼容：用event.metaKey匹配Mac的Command键，确保快捷键在不同系统上可用。
• 局部快捷键场景：若仅需特定组件内生效，将@HostListener的监听目标改为组件自身（去掉document:），并确保组件处于焦点状态。

内容的提问来源于stack exchange，提问作者Thiago Souza