Javascript 角度6主题订阅不工作

我有一个应用程序，每当请求开始和结束时，它都会发出一个“字符串”：

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

  private loadingIndicatorSource = new  Subject<string>();
  private loadingIndicator$ = this.loadingIndicatorSource.asObservable();

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    this.updateVisibility('block');
    return next.handle(req)
      .pipe(
        finalize(
          () => {
            this.updateVisibility('none');
          }
        )
      )
      ;
  }

  updateVisibility(state: string) {
    this.loadingIndicatorSource.next(state);
  }

  getLoadingIndicator() {
    return this.loadingIndicator$;
  }
}

实际上，我正在尝试显示一个加载指示器：

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

我从官方网站下载了教程

但是subscribe方法从不执行

---

为什么订阅方法不起作用？

我要做的是创建一个SpinnerService和一个SpinnerInterceptor，而不是将它们合并在一起

使微调器服务分配未完成请求的数量，如果未完成请求大于0，则显示微调器

@Injectable()
export class SpinnerService {
    private requestAmount$ = new BehaviorSubject(0);

public showSpinner$ = this.requestAmount$.asObservable().pipe(map(r => r > 0));

requestStart() {
    this.requestAmount$.next(this.requestAmount$.getValue() + 1);
}

requestEnd() {
    this.requestAmount$.next(this.requestAmount$.getValue() - 1);
}
}

在spinnerInterceptor中，您可以注入SpinnerService并根据每个请求进行更新

@Injectable()
export class SpinnerInterceptor implements HttpInterceptor {
    constructor(private spinnerService: SpinnerService) {}

intercept(req: HttpRequest<any>, next: HttpHandler) {
        this.spinnerService.requestStart();

        return next.handle(req).pipe(
            finalize(() => {
                this.spinnerService.requestEnd();
            })
        );
    }
}

分离使它更容易阅读和理解

---

希望这有帮助

浏览器显示：“TypeError:this.loadingIndicator$。next不是函数”。这是我的导入：

import{Observable，Subject}来自'rxjs'您的代码是
this.loadingIndicator.source（state）
，但您的错误是
this.loadingIndicator$.next
。请发布错误的代码。很抱歉，有另一条评论，但它已被删除，我的评论仍保留在其中。有人说使用“
this.loadingIndicator$.next（state）
”，然后他删除了评论。我将存储
this.loadingIndicator.getLoadingIndicator（）
在一个变量中，并订阅该变量。看起来会好得多。它不会被触发，因为拦截器需要使用HTTP请求。因为您没有发出HTTP请求，所以永远不会调用
next
方法，这意味着您不运行订阅。
@Injectable()
export class SpinnerInterceptor implements HttpInterceptor {
    constructor(private spinnerService: SpinnerService) {}

intercept(req: HttpRequest<any>, next: HttpHandler) {
        this.spinnerService.requestStart();

        return next.handle(req).pipe(
            finalize(() => {
                this.spinnerService.requestEnd();
            })
        );
    }
}

export class AppComponent implements OnInit{


  display = 'none';

  constructor(public  authenticationService: AuthenticationService,
              public spinnerService: SpinnerService) {}
ngOnInit(){
    this.spinnerService.showSpinner$.subscribe(visibility => {
      console.log(visibility);
      this.display = visibility ? 'block': 'none';
    });

    }
  }