Angular应用中传递两个按钮DOM元素至对应函数时的空值问题

兄弟，你现在碰到的问题其实是直接操作DOM带来的典型坑——Angular本身是数据驱动视图的框架，硬要手动抓取DOM元素很容易遇到作用域或元素未初始化的问题。我给你两种解决方案，优先推荐第一种，完全贴合Angular的设计思路，再也不会出现元素为null的情况：

方案一：数据绑定控制高亮（推荐） #

这种方式完全不需要碰DOM元素，靠组件内的状态变量就能精准控制按钮样式，简单又可靠。

1. 组件类定义状态变量 #

在你的组件.ts文件里，添加一个变量标记当前激活的按钮：

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent {
  // 标记当前激活的按钮，可默认第一个按钮激活
  activeBtn: 'btn1' | 'btn2' = 'btn1';

  // 按钮1点击事件
  onBtn1Click() {
    this.activeBtn = 'btn1';
  }

  // 按钮2点击事件
  onBtn2Click() {
    this.activeBtn = 'btn2';
  }
}

2. 模板绑定样式类 #

在组件的.html文件中，给两个按钮绑定[class]属性，根据activeBtn的值自动切换高亮样式：

<!-- 按钮1 -->
<button 
  class="custom-btn"
  [class.highlighted]="activeBtn === 'btn1'"
  (click)="onBtn1Click()"
>
  按钮1
</button>

<!-- 按钮2 -->
<button 
  class="custom-btn"
  [class.highlighted]="activeBtn === 'btn2'"
  (click)="onBtn2Click()"
>
  按钮2
</button>

3. 编写自定义样式 #

在组件的.css文件里，补全基础按钮和高亮状态的样式：

.custom-btn {
  /* 基础按钮样式 */
  padding: 8px 16px;
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s;
}

.highlighted {
  /* 高亮状态样式 */
  background: #2196F3;
  color: white;
  border-color: #1976D2;
}

这样一来，不管点击哪个按钮，只要更新activeBtn的值，Angular会自动帮你切换两个按钮的样式，全程不需要手动操作DOM，自然就不会出现元素为null的问题了。

方案二：用ViewChild获取DOM元素（不推荐，仅适配特殊场景） #

如果因为某些原因必须操作DOM，你可以用Angular提供的@ViewChild获取按钮元素的引用，确保能拿到正确的DOM对象：

1. 组件类获取按钮引用 #

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

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent {
  @ViewChild('btn1') btn1!: ElementRef<HTMLButtonElement>;
  @ViewChild('btn2') btn2!: ElementRef<HTMLButtonElement>;

  onBtn1Click() {
    // 给按钮1加高亮，按钮2移除高亮
    this.btn1.nativeElement.classList.add('highlighted');
    this.btn2.nativeElement.classList.remove('highlighted');
  }

  onBtn2Click() {
    // 给按钮2加高亮，按钮1移除高亮
    this.btn2.nativeElement.classList.add('highlighted');
    this.btn1.nativeElement.classList.remove('highlighted');
  }
}

2. 模板添加模板引用变量 #

<button #btn1 class="custom-btn" (click)="onBtn1Click()">按钮1</button>
<button #btn2 class="custom-btn" (click)="onBtn2Click()">按钮2</button>

样式部分和方案一一致就行。不过还是要提醒你，这种方式破坏了Angular的数据驱动模式，后期维护容易出问题，除非万不得已，优先用方案一。

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