ОШИБКА TypeError: не удается прочитать свойство 'style' из null

#javascript #angular #scss-lint

#javascript #угловой #scss-lint

Вопрос:

Я работаю над проектом angular 8 и пытался добавить наложение экрана страницы, но столкнулся с ОШИБКОЙ TypeError: не удается прочитать свойство ‘style’ null. Я добавил кнопку, на которой я создаю style.display = ‘none’ ИЛИ ‘block’. Мой код корректно работает на локальном компьютере, но после развертывания на firebase с использованием «ng build —prod» я получил сообщение об ошибке. Вот мои файлы

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");
  }

1. Вы получаете элемент document.getElementById('loader-overlay') ? попробуйте отладить или утешить его.

2. Рассмотрите другие способы достижения этого без использования document.getElementById . Поскольку вы используете angular, вы можете просто использовать *ngIf для отображения и скрытия загрузчика

Ответ №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;
}