Angular中：点击银行按钮时，如何触发另一按钮的focus-within状态并激活？

首先得明确：focus-within是CSS伪类，没法直接通过JS触发它的状态，但我们可以换个思路——用Angular的属性绑定控制自定义样式类，让这个类的样式和focus-within完全一致，这样就能通过组件逻辑来控制另一个按钮的激活效果了。

具体步骤 #

1. 统一激活样式 #

先给按钮定义激活（亮红色）的样式，不管是原生focus-within状态还是我们自定义的激活类，样式保持一致：

/* 原生focus-within激活样式 */
.bank-btn:focus-within {
  background-color: #ff3333; /* 亮红色 */
  border-color: #ff3333;
  /* 补充其他你需要的激活样式，比如文字颜色、阴影等 */
}

/* 自定义激活类，样式和上面完全同步 */
.bank-btn.active {
  background-color: #ff3333;
  border-color: #ff3333;
  /* 同步focus-within的所有样式 */
}

2. 组件逻辑实现 #

这里提供两种常用的实现方式，根据你的按钮数量选择：

方式一：少量按钮（固定数量）

如果按钮数量不多，可以直接用模板变量结合组件逻辑控制：

HTML模板：

<button 
  #bankBtn 
  class="bank-btn"
  (focus)="handleBtnFocus($event)"
  (blur)="handleBtnBlur($event)"
>
  银行名称1
</button>
<button 
  #bankBtn 
  class="bank-btn"
  [class.active]="isSecondBtnActive"
>
  银行名称2
</button>
<button 
  #bankBtn 
  class="bank-btn"
>
  银行名称3
</button>

组件TS代码：

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

@Component({
  selector: 'app-bank-buttons',
  templateUrl: './bank-buttons.component.html',
  styleUrls: ['./bank-buttons.component.css']
})
export class BankButtonsComponent {
  @ViewChildren('bankBtn') bankButtons!: QueryList<ElementRef<HTMLButtonElement>>;
  isSecondBtnActive = false;

  handleBtnFocus(event: FocusEvent) {
    const currentBtn = event.target as HTMLButtonElement;
    const btnList = this.bankButtons.toArray();
    const currentIndex = btnList.findIndex(item => item.nativeElement === currentBtn);

    // 只处理非最后一个按钮的情况
    if (currentIndex !== -1 && currentIndex < btnList.length - 1) {
      this.isSecondBtnActive = true;
      // 如果你需要让下一个按钮真的获得焦点（而不只是样式变红色），可以打开下面这行代码
      // btnList[currentIndex + 1].nativeElement.focus();
    }
  }

  handleBtnBlur(event: FocusEvent) {
    const currentBtn = event.target as HTMLButtonElement;
    const btnList = this.bankButtons.toArray();
    const currentIndex = btnList.findIndex(item => item.nativeElement === currentBtn);

    if (currentIndex !== -1 && currentIndex < btnList.length - 1) {
      this.isSecondBtnActive = false;
      // 如果之前让下一个按钮获得了焦点，这里可以取消焦点
      // btnList[currentIndex + 1].nativeElement.blur();
    }
  }
}

方式二：动态多个按钮

如果按钮是动态生成的（比如从接口获取银行列表），用状态数组来管理更灵活：

HTML模板：

<button 
  *ngFor="let bank of bankList; let i = index"
  class="bank-btn"
  (focus)="onBtnFocus(i)"
  (blur)="onBtnBlur(i)"
  [class.active]="buttonActiveStates[i+1]"
>
  {{bank.name}}
</button>

组件TS代码：

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

interface BankItem {
  name: string;
}

@Component({
  selector: 'app-bank-buttons',
  templateUrl: './bank-buttons.component.html',
  styleUrls: ['./bank-buttons.component.css']
})
export class BankButtonsComponent {
  // 模拟从接口获取的银行列表
  bankList: BankItem[] = [
    { name: '银行名称1' },
    { name: '银行名称2' },
    { name: '银行名称3' },
    { name: '银行名称4' }
  ];
  // 存储每个按钮的激活状态，初始全为false
  buttonActiveStates: boolean[] = new Array(this.bankList.length).fill(false);

  onBtnFocus(index: number) {
    // 激活当前按钮的下一个按钮状态
    if (index + 1 < this.bankList.length) {
      this.buttonActiveStates[index + 1] = true;
    }
  }

  onBtnBlur(index: number) {
    // 取消当前按钮的下一个按钮状态
    if (index + 1 < this.bankList.length) {
      this.buttonActiveStates[index + 1] = false;
    }
  }
}

补充说明 #

• 如果需要让下一个按钮真正获得焦点（原生focus状态），直接调用按钮元素的focus()方法即可，此时原生的focus-within样式会自动生效，不需要额外加自定义类。
• 注意处理边界：当点击最后一个按钮时，不需要处理下一个按钮的状态，避免数组越界。

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