Angular 6 EventEmitter не работает

Question

это сервис, сервис реализует два EventEmitter

 @Injectable()
    export class SpinnerService implements HttpInterceptor {
        visibility: EventEmitter<boolean> = new EventEmitter(false);
        notVisibility: EventEmitter<boolean> = new EventEmitter(false);
        constructor() { }
        intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
            **doesn 't work**
            this.visibility.emit(true);
            next.handle(request).subscribe(
                httpParameter => {
                    if (httpParameter instanceof HttpResponse) {
                        this.notVisibility.emit(false);
                    }
                });
            return next.handle(request);
        }
    }

это компонент

export class SpinnerComponent implements OnInit {
    visibility: boolean;
    ngOnInit() {
        this.subscribeToVisibility();
        this.subscribeToNotVisibility();
    }
    constructor(private spinnerService: SpinnerService) { }

    private subscribeToVisibility(): void {
        this.spinnerService.visibility.subscribe((value: boolean) => {
            **should enter here**
            this.visibility = value;
        });
    }
    private subscribeToNotVisibility(): void {
        this.spinnerService.notVisibility.subscribe((value: boolean) => {
            this.visibility = value;
        });
    }
}

Answer 1

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

демонстрация стекаблиц

служба перехватчика

export class InterceptorService implements HttpInterceptor {

  constructor(private spinner: SpinnerService) {}

  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    this.spinner.visibility.emit(true);
    return next.handle(req)
      .pipe(
      delay(1000), // delay is not required just to observe the effect
      finalize(() => this.spinner.notVisibility.emit(false))
      )
  }

}

спиннер сервис

export class SpinnerService {

  public visibility: EventEmitter<boolean> = new EventEmitter();
  public notVisibility: EventEmitter<boolean> = new EventEmitter();

}

добавить сервисы в массив провайдеров AppModule

app.module

@NgModule({
  imports: [BrowserModule, HttpClientModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
  providers: [
     { provide: HTTP_INTERCEPTORS, useClass: InterceptorService, multi: true },
    , SpinnerService
  ]
})
export class AppModule { }

составная часть

export class AppComponent {

  public visibility: boolean = false;

  constructor(private _http: HttpClient, private spinnerService: SpinnerService) { }

  ngOnInit() {

    this.spinnerService.visibility.subscribe(state => {
      this.visibility = state;
      console.log('visibility', state);
    });

    this.spinnerService.notVisibility.subscribe(state => {
      this.visibility = state;
      console.log('notVisibility', state);
    });

  }

  getData() { // make http request 
    this._http.get('https://jsonplaceholder.typicode.com/todos/1')
      .subscribe(console.log)
  }
}

шаблон

<button (click)="getData()" [disabled]="visibility">Get Data!</button>

<div>
    visibility {{visibility}}
</div>