Angular自定义Popup样式修改失败：DOM元素获取为null问题排查

你遇到的核心问题是DOM渲染时机不匹配：当你在openToolTip里把this.popup设为true后，Angular并不会立刻把<div id="popupId">渲染到DOM中，此时调用document.getElementById自然会返回null。另外你的代码还有两处小错误：

• document.getElementByID拼写错误，正确写法是document.getElementById（最后一个字母为小写d）
• DOM样式属性名是驼峰命名的backgroundColor，不是全小写的backgroundcolor

方案一：用Angular数据绑定（推荐，符合框架规范） #

Angular不推荐直接操作DOM，优先用属性绑定控制样式，更契合框架的响应式机制：

1. 组件类添加样式控制变量：

export class TooltipComponent implements OnInit {
  popup = false;
  popupBgColor = ''; // 用于控制背景色的变量

  openToolTip($event: { target: any; stopPropagation: () => void }) {
    $event.stopPropagation();
    this.popup = !this.popup;
    // 切换popup显示状态时设置背景色
    if (this.popup) {
      this.popupBgColor = 'green';
    }
  }

  @HostListener('document:click', ['$event']) onDocumentClick(event: any) {
    this.popup = false;
  }
 
  constructor() { }
  ngOnInit(): void { }
}

2. 模板中用[style.backgroundColor]绑定样式：

<span class="info-icon" (click)="openToolTip($event)">
    <mat-icon>info_outline</mat-icon>
</span>

<div *ngIf="popup" class="popup" (click)="$event.stopPropagation()" [style.backgroundColor]="popupBgColor">
    <div class="text-box"></div>
    <a class="close" (click)="popup = false">&times;</a>
</div>

方案二：必须操作DOM时的正确方式（用ViewChild和变更检测） #

如果一定要直接操作DOM元素，需要借助ViewChild和Angular的变更检测钩子，确保DOM已渲染完成：

1. 组件类修改：

import { Component, OnInit, HostListener, ViewChild, ElementRef, AfterViewChecked, ChangeDetectorRef } from '@angular/core';

export class TooltipComponent implements OnInit, AfterViewChecked {
  popup = false;
  @ViewChild('popupRef') popupRef!: ElementRef; // 获取DOM元素引用
  needUpdateStyle = false; // 标记是否需要更新样式

  constructor(private cdr: ChangeDetectorRef) { }

  openToolTip($event: { target: any; stopPropagation: () => void }) {
    $event.stopPropagation();
    this.popup = !this.popup;
    if (this.popup) {
      this.needUpdateStyle = true;
    }
  }

  @HostListener('document:click', ['$event']) onDocumentClick(event: any) {
    this.popup = false;
  }

  ngAfterViewChecked(): void {
    // 当标记需要更新且DOM元素已存在时，修改样式
    if (this.needUpdateStyle && this.popupRef) {
      this.popupRef.nativeElement.style.backgroundColor = 'green';
      this.needUpdateStyle = false;
      this.cdr.detectChanges(); // 手动触发变更检测避免循环
    }
  }
 
  ngOnInit(): void { }
}

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

<span class="info-icon" (click)="openToolTip($event)">
    <mat-icon>info_outline</mat-icon>
</span>

<div *ngIf="popup" #popupRef class="popup" (click)="$event.stopPropagation()">
    <div class="text-box"></div>
    <a class="close" (click)="popup = false">&times;</a>
</div>

额外说明 #

另一个按钮能成功修改样式，大概率是因为它对应的popup未用*ngIf控制，而是通过display:none等方式隐藏，元素始终存在于DOM中，所以能直接获取到。

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