Angular报错：ccavtabSelected.nativeElement.classList.contains(...).focus不是函数

错误核心原因 #

• 链式调用逻辑错误：classList.contains()方法返回的是布尔值（true/false），布尔类型没有focus()方法，直接在其结果后链式调用focus()必然触发类型错误。
• API拼写错误：代码里的classlist是小写L，正确的DOM API名称是classList（首字母L大写）。
• 类名检查方式错误：contains()只能传入单个类名，无法识别空格分隔的两个类名，这样的检查永远会返回false。

出错代码片段 #

触发错误的关键代码行：

this.ccavtabSelected.nativeElement.classList.contains('ccav-tab-container-selected active').focus();

修复步骤 #

1. 修正类名检查逻辑 #

要同时验证两个类是否存在，有两种可行方式：

• 两次调用contains()，用逻辑与连接判断
• 使用matches()方法，传入完整的CSS类选择器

2. 修正API拼写 #

将所有classlist替换为classList。

3. 调整调用顺序 #

先判断元素是否符合类名条件，再对元素本身调用focus()，而非对布尔值调用。

修复后的代码示例 #

以DEBITCARD分支为例，修正后的代码如下：

setTimeout(() => {
  // 方式1：两次contains检查
  const element = this.ccavTabSelected.nativeElement;
  if (element.classList.contains('ccav-tab-container-selected') && element.classList.contains('active')) {
    element.focus();
  }

  // 方式2：使用matches（更简洁）
  // if (this.ccavTabSelected.nativeElement.matches('.ccav-tab-container-selected.active')) {
  //   this.ccavTabSelected.nativeElement.focus();
  // }
}, 20);

额外优化建议 #

• 代码存在大量重复逻辑，可将setTimeout内的判断和focus逻辑抽成独立方法，减少冗余。
• 当前event变量未作为函数参数定义，存在全局变量依赖风险，建议修改函数定义为selectTab(tabIndex: any, event: Event)，并在调用时传入事件对象。

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