Отключение кликов по всей странице, когда счетчик отображается в Angular

Question

Я не могу отключить щелчки мышью повсюду на странице при нажатии на спиннер.Вот иерархия компонентов с угловыми.В обертке содержимого есть дочерние компоненты, которые должны вызывать службу spinnner.

// spinner.service.ts
  numberOfTasks: 0;
  spinnerSubject: any;
  spinnerState: Observable<any>;
  constructor(private http: HttpClient) {

    this.spinnerSubject = new BehaviorSubject({ numberOfTasks: 0 });
    const spinnerShow = this.spinnerSubject.pipe(filter(state =>
      state.numberOfTasks > 0),
        mergeMap((state) => of(state).pipe(
        delay(state.delay),
        takeUntil(spinnerHide))));
    const spinnerHide =
    this.spinnerSubject.pipe(filter(state => state.numberOfTasks <= 0);
    this.spinnerState = merge(spinnerShow, spinnerHide); 
      )

  }

  show(delay) {
    this.spinnerSubject.next({ delay, numberOfTasks: ++this.numberOfTasks })
  }

  hide() {
    if (this.numberOfTasks > 0) {
      this.spinnerSubject.next({ numberOfTasks: --this.numberOfTasks });
    }

    // app.component.html
    <content-wrapper></content-wrapper>
    <page-spinner></page-spinner>

      page.spinner.html
       <div *ngIf="showSpinner" class="page-spinner">
           //  svg right here
        </div>
     //page-spinner.component.ts
     ngOnInit() {
       this.spinnerState.subscribe(state => { 
         this.showSpinner = state.numberOfTasks > 0;
         }
     })
     }
     // spinner.component.scss
    .page-spinner {
      position: absolute;
      width: 100vw;
      height: 100vh;
      z-index: 999999;
      pointer-events:unset;
      background-color: black;
      opacity: 0.5;
    }

Я хотел бы заметить, что когда я жестко закодировал HTML-код счетчика, используя инструменты разработчика ,поэтому он отображается на странице, которую я не могу щелкнуть по странице, но при динамической загрузке счетчика, как указано выше, я по-прежнему могу нажимать кнопки и т. д., даже если отображается счетчик.Пожалуйста, помогите мне найти причину этого и помочь мне исправить это.

Answer 1

Если вы хотите отключить щелчки мыши, вы можете добавить следующий код в тело (или родительский элемент).

element {
    pointer-events: none;
}

Добавьте это к телу или элементам индивидуально. Затем, когда страница загрузится, используйте несколько js, чтобы удалить CSS.

Answer 2

Ответ заключается в добавлении debounceTime (300) в hideSpinner. Стили просто не рассчитываются достаточно быстро.