Angular 4：点击其他元素或外部时如何移除元素类？

嘿，我完全懂你遇到的麻烦——Bootstrap的input-add-on在表单控件前面，CSS确实没法直接通过:focus伪类定位到它，而且你需要全局处理焦点切换时的类添加/移除，这在Angular里用自定义指令来实现是最优雅的方式，完全贴合框架的最佳实践，我给你一步步拆解：

1. 创建全局复用的自定义指令 #

我们可以写一个指令，自动绑定到所有Bootstrap的input-group元素上，监听焦点事件和全局点击事件来控制类的添加/移除：

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

@Directive({
  selector: '.input-group' // 自动匹配所有Bootstrap输入组父div
})
export class InputGroupFocusDirective {
  private formControl: HTMLElement | null = null;

  constructor(private el: ElementRef, private renderer: Renderer2) {
    // 提前获取当前输入组内的表单控件
    this.formControl = this.el.nativeElement.querySelector('.form-control');
  }

  // 监听输入组内的焦点进入事件
  @HostListener('focusin', ['$event'])
  onFocusIn(event: Event) {
    // 确认是表单控件获得焦点
    if (event.target === this.formControl) {
      this.renderer.addClass(this.el.nativeElement, 'input-group-focused');
    }
  }

  // 监听全局文档点击事件，判断是否点击到输入组外部
  @HostListener('document:click', ['$event'])
  onDocumentClick(event: Event) {
    const isClickedInsideGroup = this.el.nativeElement.contains(event.target);
    if (!isClickedInsideGroup) {
      this.renderer.removeClass(this.el.nativeElement, 'input-group-focused');
    }
  }
}

2. 在模块中声明指令 #

把这个指令添加到你的根模块（比如AppModule）的declarations数组里，这样它就能全局生效了：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { InputGroupFocusDirective } from './directives/input-group-focus.directive'; // 替换成你的指令实际路径
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent,
    InputGroupFocusDirective
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

3. 编写对应的焦点样式 #

现在你可以自由定义input-group-focused类下的input-add-on样式了，比如：

.input-group-focused .input-add-on {
  background-color: #f8f9fa;
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

为什么这个方案好用？ #

• 全局复用：不用在每个组件里重复写事件逻辑，所有input-group都会自动生效
• 符合Angular规范：用Renderer2操作DOM，避免直接操作原生DOM带来的风险
• 精准控制：通过focusin监听焦点进入，全局点击判断外部点击，完美处理焦点切换和点击外部的情况

如果你的输入组里有多个表单控件，只需要稍微调整querySelector的逻辑，比如用querySelectorAll遍历判断即可。

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