Question

我知道该方法是在代码库其他部分的每次服务调用之后被调用的，但是每次我在遍历代码时调用false似乎都不会更新回{{1} }。

我已经使用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);
  }
}

html

<div>
  <span *ngIf="ShowSpinner">
    spinnerfork works!
  </span>
</div>

“动感单车有效！”应该在3秒而不是10秒后从屏幕上消失

Answer 1

这不起作用，因为充当HttpInterceptor的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_INTERCEPTORS时，会将AppComponent的另一个实例创建为服务并充当拦截器。拦截器是要修改HTTP请求而不是修改UI元素的全局服务。我认为您正在尝试做其他事情。

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

A = tk.StringVar()
B = tk.StringVar()

def turn():
    A = B.get()
    if A == "Hirasa" or "hirasa":
        print("ok")
    else:
        print("no")

entry1 = tk.Entry(window0,textvariable=B)
entry1.pack()

button1 = tk.Button(window0,text="Continue",command=turn)
button1.pack()

以下是此解决方案的StackBlitz。

如果您需要收听所有事件并想获取进度信息，请检查documentation about listening to progress events。

为什么拦截方法被调用后不更新ShowSpinner变量

1 个答案: