错误类型错误：无法读取 null 的属性“样式”答案

【问题标题】：ERROR TypeError: Cannot read property 'style' of null错误类型错误：无法读取 null 的属性“样式”
【发布时间】：2026-01-27 02:45:01
【问题描述】：

我正在处理 Angular 8 项目，并试图添加页面屏幕覆盖，但面临错误类型错误：无法读取 null 的属性“样式”。我添加了按钮，我在其上制作 style.display = 'none' OR 'block'。我的代码在 Local 上正常工作，但在使用“ng build --prod”在 Firebase 上部署后出现错误。这是我的文件

index.html 文件

    <div id="loader-overlay">
      <div class="spinner-container">
        <div class="loader"></div>
      </div>
    </div>
  </div>

Styles.scss 文件

#loader-overlay-container {
  position: absolute;
  z-index: 10000000;
  top:0;
}

#loader-overlay {
  display: none;
  height: 100vh;
  width: 100vw;
  background-color: #333;
  opacity: 0.5;
}

shared.service.ts

 // To ADD Page loader screen
  enablePageLoaderOverlay() { 
    document.getElementById('loader-overlay').style.display = 'block';
  }

  // To REMOVE Page loader screen
  disablePageLoaderOverlay() {
    document.getElementById('loader-overlay').style.display = 'none';
  }

booking.component.ts

onBookService(name: string) {

    // To ADD Page loader screen
    this.sharedService.enablePageLoaderOverlay();

    this.sharedCartService.addToCart(this.services[name], "book");
  }

【问题讨论】：

您是否在document.getElementById('loader-overlay') 中获取元素？尝试调试或控制台。
考虑其他不使用document.getElementById 的方法来实现这一点。由于您使用的是角度，您可以简单地使用*ngIf 来显示和隐藏加载器

标签： javascript angular scss-lint

【解决方案1】：

我认为问题在于您的 DOM 元素在 index.html 文件中。

工作堆栈闪电战：

https://stackblitz.com/edit/angular-ivy-6286ot?file=src/app/app.component.html

<button (click)="hide()">Hide</button>
<button (click)="show()">Show</button>

<div id="loader-overlay">
  <div class="spinner-container">
    <div class="loader"></div>
  </div>
</div>

  hide(): void {
    document.getElementById("loader-overlay").style.display = "none";
  }

  show(): void {
    document.getElementById("loader-overlay").style.display = "block";
  }

但是，我建议使用 ViewChild 而不是使用 getElementById 进行搜索。

https://angular.io/api/core/ViewChild

【讨论】：

【解决方案2】：

这是使用 Angular 的错误方式...相反它应该是

<div *ng-if='IsLoaderShown">
    <div class="spinner-container">
        <div class="loader"></div>
    </div>
</div>

然后在你的代码中：

IsLoaderShown = true;

hide(): void {
    this.IsLoaderShown = false;
}

show(): void {
    this.IsLoaderShown = true;
}

【讨论】：