1

单击微调器时，我无法在页面上的所有位置禁用鼠标单击。这是带有角度的组件的层次结构。content-wrapper 中有子组件应该能够调用 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 进行硬编码时，它显示在页面上我无法单击页面，但是当微调器动态加载时，如上所述，我仍然可以单击按钮等，即使显示微调器。请帮助我找到这个的根本原因并帮助我解决这个问题。

4

2 回答 2

2

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

element {
    pointer-events: none;
}

将此添加到正文或单独添加到元素中。然后当页面加载后，使用一些 js 删除 CSS。

于 2019-03-10T11:19:27.070 回答
0

答案是将 debounceTime(300) 添加到 hideSpinner。样式计算速度不够快。

于 2019-03-11T14:45:52.293 回答