錯誤類型錯誤：無法讀取 null 的屬性“樣式”

Question

我正在處理 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;
}

共享服務.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';
  }

預訂.component.ts

onBookService(name: string) {

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

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

Answer 1

我認為問題在於您在 index.html 文件中有 DOM 元素。

工作堆棧閃電戰：

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

Answer 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;
}