Angular 角度2+；ngIf更新速度慢

我遇到了一个问题，ngIf对微调器覆盖上的更新反应缓慢

我的微调器组件是：

  selector: 'my-spinner',
  template: `
    <div class="spinner-overlay" *ngIf="show">
      <div class="spinner">
        <mat-spinner [diameter]="60" *ngIf="show"> </mat-spinner>
      </div>
    </div>
  `,
  styleUrls: ['./spinner.scss']
})
export class SpinnerComponent implements OnInit {
  show: boolean = false;

  constructor(private spinnerService: SpinnerService, public changeDetector: ChangeDetectorRef) {}

  ngOnInit() {
    this.spinnerService.loaderStatus.subscribe((val: any) => {
      this.show = val.status;
      this.changeDetector.detectChanges();
    });
  }
}

选择器：“我的微调器”，
模板：`
`,
样式URL:['./spinner.scss']
})
导出类SpinnerComponent实现OnInit{
show:boolean=false；
构造函数（私有spinnerService:spinnerService，公共changeDetector:ChangeDetectorRef）{}
恩戈尼尼特（）{
this.spinnerService.loaderStatus.subscribe（（val:any）=>{
this.show=val.status；
this.changeDetector.detectChanges（）；
});
}
}

然后有一个简单的SpinnerService用于显示/隐藏覆盖

export class SpinnerService {
  public loaderStatus: BehaviorSubject<any> = new BehaviorSubject<any>(false);

  constructor() {}

  show() {
    this.loaderStatus.next(true);
  }

  hide() {
    this.loaderStatus.next(false);
  }
}

出口级喷丝板服务{
公共加载程序状态：BehaviorSubject=新的BehaviorSubject（false）；
构造函数（）{}
show（）{
this.loaderStatus.next（true）；
}
隐藏（）{
this.loaderStatus.next（false）；
}
}

最后，我们在http拦截器中使用该服务，该拦截器调用微调器服务的函数show和hide

---

使用调试器检查一切工作正常，但即使在show属性设置为false后，微调器覆盖仍会在屏幕上停留3-8秒。

对显示字段使用异步管道如何，您可以将主题声明为可观察，