如何将布尔值从 http 请求发送到组件？(Angular)

Question

我用 Angular 7 创建了一个程序，我想用布尔值捕获 http 请求并将其传输到组件。为此，我尝试将 BehaviourSubject 与 next 一起使用。所以布尔值必须在这两个函数 checkin() 和 checkOut() 中为真。我附上了代码。我将不胜感激任何帮助。谢谢！

import { Component, OnInit } from '@angular/core';
import { HttpLoadingInterceptor } from '../../../interceptor/http-loading.interceptor';
import { Subscription } from 'rxjs';

@Component({
  selector: 'app',
  templateUrl: './app.html',
  styleUrls: ['./app.scss']
})
export class App implements OnInit {
  subscriptionBlockUI: Subscription;
  blockUIState: boolean;

  constructor(
    private httpLoadingInterceptor: HttpLoadingInterceptor
  ) { }

  ngOnInit() {
      this.subscriptionBlockUI = this.httpLoadingInterceptor.blockUIStateValue().subscribe((blockUIValue: boolean) => {
      this.blockUIState = blockUIValue;
    });
  }

  ngOnDestroy(): void {
    this.subscriptionBlockUI.unsubscribe();
  }

}

import { Injectable } from '@angular/core';
import { BlockUIService } from 'ng-block-ui';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
import { Observable, BehaviorSubject } from 'rxjs';
import { finalize } from 'rxjs/operators';
import { CompileShallowModuleMetadata } from '@angular/compiler';

export const HEADER_LOADING = 'loadingEnabled';

@Injectable()
export class HttpLoadingInterceptor implements HttpInterceptor {

    readonly blockUiSelector: string = 'http-request';
    private count = 0;
    public blockUIState = new BehaviorSubject<boolean>(false);

    constructor(private uiServ: BlockUIService) { }

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        if (req.headers.has(HEADER_LOADING)) {
            return next.handle(req);
        }

        this.checkin();
        return next.handle(req).pipe(finalize(() => this.checkOut()));
    }

    public checkin() {
        if (this.count === 0) {
            this.uiServ.start([this.blockUiSelector]);
        } 
        this.count++;
        this.blockUIState.next(true);
    }

    public checkOut() {
        this.count--;

        setTimeout(() => {
            if (this.count === 0) {
                this.uiServ.stop([this.blockUiSelector]);
            }
        }, 10); 
        this.blockUIState.next(true);
    }

    public blockUIStateValue(): Observable<boolean> {
        return this.blockUIState;
    }
}

Answer 1

试试这个：在你的 component.ts:

ngOnInit() {
      this.subscriptionBlockUI = this.httpLoadingInterceptor.blockUIState.subscribe((blockUIValue: boolean) => {
      this.blockUIState = blockUIValue;
    });
  }

Answer 2

好吧，如果你没有得到这个值，你可能想通过 BehaviorSubject 使 blockUIState 成为一个 Observable。

在service.ts

public blockUIState = new BehaviorSubject<boolean>(false);
blockUIState$ = this.blockUIState.asObservable();

在component.ts

  ngOnInit() {
      this.subscriptionBlockUI = this.httpLoadingInterceptor.blockUIState$.subscribe((blockUIValue: boolean) => {
      this.blockUIState = blockUIValue;
    });
  }

编辑：之前的更正无效。尝试设置调试器

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (req.headers.has(HEADER_LOADING)) {
        return next.handle(req);
    }
    debugger;
    this.checkin();
    return next.handle(req).pipe(finalize(() => this.checkOut()));
}

因为checkin()只在这一段被调用了。请尝试一下。

编辑：请从 if 子句中删除 next.handle(req)。现在的代码应该是：

if (req.headers.has(HEADER_LOADING)) {
    // return next.handle(req);
}

this.checkin();
return next.handle(req).pipe(finalize(() => this.checkOut()));

因为，当条件为真时，它将 return 并且不会调用 `this.checkin() 的下一部分。

如何将布尔值从 http 请求发送到组件？(Angular)

How to send a boolean from a http request to a component?(Angular)

rxjs

angular

angular-httpclient