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

标签： angularangular6eventemitter

Answer 1

我认为将 SpinnerService 与拦截器分开并创建拦截器服务要好得多，通常在你的情况下，拦截器服务没有像你提到的那样调用，检查我基于拦截器服务的微调器实现。

stackblitz 演示

拦截器服务

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 提供程序数组

应用程序模块

@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>