Почему метод перехвата не обновляет переменную ShowSpinner после ее вызова - PullRequest
Новая
       15

Почему метод перехвата не обновляет переменную ShowSpinner после ее вызова

0 голосов
/ 18 апреля 2019

Я знаю, что метод вызывается после каждого вызова службы из какой-либо другой части базы кода, но каждый раз, когда я выполняю шаг по коду, когда он вызывается ShowSpinner, похоже, не обновляется до false.

Я использовал метод ngOnInit(), чтобы проверить, могу ли я обновить ShowSpinner вне метода Intercept, и он действительно обновляет 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 секунд

1 Ответ

0 голосов
/ 19 апреля 2019

Это может не работать, потому что AppComponent, который действует как HttpInterceptor, не совпадает с отображаемым компонентом. Вы регистрируете перехватчик в модуле так: 

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

Это означает, что когда приложение запрашивает HTTP_INTERCEPTORS, другой экземпляр AppComponent создается как служба и действует как перехватчик. Предполагается, что перехватчики являются глобальными службами, которые изменяют HTTP-запросы, а не изменяют элементы пользовательского интерфейса. Я думаю, что вы пытаетесь сделать что-то еще.

Если вы хотите показать спиннер во время выполнения запроса, вы можете реализовать его очень просто, например: 

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
    });;
}

Вот StackBlitz с этим решением.

Если вам необходимо прослушать все события и получить информацию о прогрессе, проверьте документацию о прослушивании событий прогресса .

...