在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。样式的计算速度不够快。