同一页面多表格组件Ctrl+B快捷键冲突：如何聚焦指定表格添加行？

要让Ctrl+B只作用于当前聚焦的表格组件，核心是判断快捷键触发时，当前组件是否处于激活/焦点状态，以下是两种可行的实现方式：

方式一：基于组件焦点状态判断 #

步骤1：让组件可聚焦 #

在组件模板的根元素（比如表格容器）上添加tabindex="0"，让组件能通过点击获得焦点：

<!-- 组件模板示例 -->
<div class="table-container" tabindex="0">
  <table>
    <!-- 表格内容 -->
  </table>
</div>

步骤2：维护焦点状态并修改快捷键逻辑 #

在组件类中添加焦点状态变量，监听自身的focus和blur事件更新状态，再在快捷键触发时判断状态：

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

@Component({
  selector: 'app-table-component',
  templateUrl: './table-component.component.html',
  styleUrls: ['./table-component.component.css']
})
export class TableComponentComponent {
  private isFocused = false;

  constructor(private elementRef: ElementRef) {}

  // 监听组件自身的焦点事件
  @HostListener('focus')
  onFocus() {
    this.isFocused = true;
  }

  @HostListener('blur')
  onBlur() {
    this.isFocused = false;
  }

  @HostListener('document:keypress', ['$event'])
  handleKeyboardEvent($event: KeyboardEvent) {
    const keyCode = $event.key;
    // 仅当组件处于聚焦状态时，才执行添加行操作
    if(($event.ctrlKey || $event.metaKey) && keyCode === '\x02' && this.isFocused) {
      $event.stopPropagation(); // 阻止事件冒泡，避免其他组件触发
      this.onAdd();
    }
  }

  onAdd() {
    // 你的添加行逻辑
    console.log('给当前表格添加一行');
  }
}

方式二：基于事件目标归属判断 #

如果不想依赖tabindex，可以直接判断快捷键触发时，事件的目标元素是否属于当前组件的DOM范围：

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

@Component({
  selector: 'app-table-component',
  templateUrl: './table-component.component.html',
  styleUrls: ['./table-component.component.css']
})
export class TableComponentComponent {
  constructor(private elementRef: ElementRef) {}

  @HostListener('document:keypress', ['$event'])
  handleKeyboardEvent($event: KeyboardEvent) {
    const keyCode = $event.key;
    // 检查事件目标是否属于当前组件的DOM元素
    const isTargetInComponent = this.elementRef.nativeElement.contains($event.target as Node);
    
    if(($event.ctrlKey || $event.metaKey) && keyCode === '\x02' && isTargetInComponent) {
      $event.stopPropagation(); // 阻止其他组件响应
      this.onAdd();
    }
  }

  onAdd() {
    // 你的添加行逻辑
    console.log('给当前表格添加一行');
  }
}

关键说明 #

• 两种方式都需要调用$event.stopPropagation()，避免事件继续冒泡到其他组件，确保只有目标组件响应。
• 方式二更适合表格内有输入框、按钮等可交互元素的场景，只要点击组件内任意元素，快捷键就会作用于该表格。

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