Javascript 当微调器以角度显示时，禁用对整个页面的单击

单击微调器时，我无法禁用页面上任何地方的鼠标单击。 下面是具有角度的组件的层次结构。内容包装器中的子组件应该能够调用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时，它显示在页面上，我无法单击页面，但是当微调器动态加载时，如上所述，即使显示微调器，我仍然可以单击按钮等。请帮助我找到此问题的根本原因并帮助我解决此问题。

如果要禁用鼠标单击，可以将以下代码添加到正文或父元素中

元素{ 指针事件：无；

---

} 答案是将debounceTime300添加到HideSpiner。样式的计算速度不够快。

可选您可以为主体元素提供样式指针事件：微调器时间内无，微调器后返回指针事件：autoI尝试在app.component中添加div包装，并尝试使用EventEmitter从微调器组件发出showSpinner值，因此，我可以将此样式添加到包装器中，但它不起作用，似乎样式应用得太晚或诸如此类；或指针事件：未设置；就像上面我在spinner.component.css中的代码一样，我不能单击，但是当通过ngIf指令将spinner动态添加到DOM时，我可以单击，问题是为什么会这样？