Угловая привязка данных от службы к компоненту

Я хочу отображать индикатор загрузки всякий раз, когда отправляется запрос Http. Я пытаюсь использовать Angular HTTP-перехватчик, но стиль индикатора никогда не обновляется.

У меня есть индикатор загрузки в моем app.component.html

  <div [style.display]="visibilityOfLoadingIndicator">
    <mat-progress-bar mode="indeterminate" color="warn" ></mat-progress-bar>
  </div>

Вот app.component.ts:

export class AppComponent {


  visibilityOfLoadingIndicator = 'none';

  constructor(public loadingIndicatorService: LoadingIndicatorService) {
    this.loadingIndicatorService.getLoadingIndicator()
    .subscribe(visibility => {
      this.visibilityOfLoadingIndicator = <string> visibility;
    });

    }
  }

Вот HttpLoadingIndicatorService.ts:

@Injectable({
  providedIn: 'root'
})
export class LoadingIndicatorService implements HttpInterceptor {


  private display;

  private loadingIndicator: EventEmitter<string>;

  constructor() {
  this.loadingIndicator = new  EventEmitter<string>();
  }

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const started = Date.now();
    console.log('Request started');
    this.display = 'block';
    this.updateVisibility(this.display);
    return next.handle(req)
      .pipe(
        finalize(
          () => {
            const elapsed = Date.now() - started;
            const msg = `${req.method} "${req.urlWithParams}"
            in ${elapsed} ms.`;
            console.log(msg);
            this.display = 'none';
            this.updateVisibility(this.display);
          }
        )
      )
      ;
  }



  updateVisibility(state: string) {
    this.loadingIndicator.emit(state);
  }

  getLoadingIndicator() {
    return this.loadingIndicator;
  }


}

Моя служба работает, например, это вывод консоли:

->Request started

->http-loading-indicator.service.ts:24 GET "http://localhost:8080/api/film"
            in 2164 ms.

Но почему стиль индикатора не обновляется?

Стоит ли создавать Наблюдаемый?

0
0
48
1

Ответы 1

Да, вам нужно, чтобы компонент подписывался на изменения из службы, чтобы он мог сообщать Angular, что что-то изменилось.

  constructor(public  authenticationService: AuthenticationService,
              public loadingIndicatorService: HttpLoadingIndicatorService,
              changeDetector: ChangeDetectorRef) {
      loadingIndicatorService.displayChangeObservable.subscribe(() =>
      { 
          changeDetector.markForCheck();
      });
  }

  displayLoadingIndicator() {
    return this.loadingIndicatorService.display;
  }

}

обслуживание

@Injectable({
  providedIn: 'root'
})
export class HttpLoadingIndicatorService implements HttpInterceptor {

  private displayChangeSubject = new Subject<any>();
  public displayChangeObservable = this.displayChangeSubject.asObservable();

  display = 'none';

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const started = Date.now();
    console.log('Request started');
    this.display = 'block';
    this.displayChangeSubject.next();
    return next.handle(req)
      .pipe(
        finalize(
          () => {
            const elapsed = Date.now() - started;
            const msg = `${req.method} "${req.urlWithParams}"
            in ${elapsed} ms.`;
            console.log(msg);
            this.display = 'none';
            this.displayChangeSubject.next();
          }
        )
      )
      ;
  }

}

Извините за позднюю обратную связь, я попробовал ваш код сегодня, но он не обновляет видимость. Я могу обновить вопрос новым кодом.

Muhammed Ozdogan 13.08.2018 13:42

Другие вопросы по теме