Html 为什么intercept方法在它之后不更新ShowSpinner变量'；有人叫他

我知道该方法是在每次从代码库的其他部分调用服务后调用的，但每次调用

ShowSpinner

时，我一步一步地遍历代码时，它似乎都不会更新回

false

我使用了

ngOnInit（）

方法来检查是否可以在Intercept方法之外更新ShowSpinner，它确实会更新ShowSpinner，并且屏幕上会显示更改

打字稿

@Component({
  selector: 'app-spinnerfork',
  templateUrl: './spinnerfork.component.html',
  styleUrls: ['./spinnerfork.component.css']
})
export class SpinnerforkComponent implements HttpInterceptor, OnInit {

  ShowSpinner: boolean = false;
  queue = [];
  delayIn = 500;
  delayOut = 500;
  timerPromise = null;
  timerPromiseHide = null;

  constructor() { }

  intercept(request: HttpRequest<any>, next: HttpHandler):  Observable<HttpEvent<any>> {
    this.ShowSpinner = true;
    setTimeout(()=>{this.ShowSpinner = false;}, 3000);
      return next.handle(request);
  }

  ngOnInit(){
    this.ShowSpinner = true;
    setTimeout(() => {this.ShowSpinner = false}, 10000);
  }
}

@组件({
选择器：“应用程序spinnerfork”，
templateUrl:'./spinnerfork.component.html'，
样式URL:['./spinnerfork.component.css']
})
导出类SpinnerforkComponent实现HttpInterceptor，OnInit{
ShowSpinner:boolean=false；
队列=[]；
delayIn=500；
delayOut=500；
timerPromise=null；
timerPromiseHide=null；
构造函数（）{}
拦截（请求：HttpRequest，下一步：HttpHandler）：可观察{
this.ShowSpinner=true；
setTimeout（（）=>{this.ShowSpinner=false；}，3000）；
下一步返回。处理（请求）；
}
恩戈尼尼特（）{
this.ShowSpinner=true；
setTimeout（（）=>{this.ShowSpinner=false}，10000）；
}
}

html

喷丝板叉工作！

---

“spinnerfork works！”应该在3秒而不是10秒后消失在屏幕外，这无法工作，因为充当HttpInterceptor的

AppComponent

与显示的组件不同。 在模块中注册拦截器，如下所示：

providers: [{provide: HTTP_INTERCEPTORS, useClass: AppComponent,  multi: true } ]

ngOnInit(){
  console.log('on init');
  this.ShowSpinner = true; // starts spinner
  this.http.get("https://swapi.co/api/people/1").subscribe(data => {
      console.log(data);
    }, err => {
      console.log(err);
    },
    () => {
      this.ShowSpinner = false; // when the request completes or fails hide it
    });;
}

这意味着，当应用程序请求HTTP_拦截器时，将创建AppComponent的另一个实例作为服务并充当拦截器。拦截器是用来修改HTTP请求而不是修改UI元素的全局服务。我想你是在做别的事情

如果您想在请求进行时显示微调器，可以非常简单地实现它，如下所示：

providers: [{provide: HTTP_INTERCEPTORS, useClass: AppComponent,  multi: true } ]

ngOnInit(){
  console.log('on init');
  this.ShowSpinner = true; // starts spinner
  this.http.get("https://swapi.co/api/people/1").subscribe(data => {
      console.log(data);
    }, err => {
      console.log(err);
    },
    () => {
      this.ShowSpinner = false; // when the request completes or fails hide it
    });;
}

下面是一个与此解决方案相关的示例

---

如果您需要侦听所有事件并希望获取进度信息，请检查。

是否调用了

截取

函数？是的，它现在不显示，但我调用了console.log（）。可能是

此

上下文，然后。它会作为箭头函数工作吗？根本不会调用intercept。过来看。必须进行http调用才能调用intercept