rxjs BehaviorSubject.next не был триггером - PullRequest
Новая
       7

rxjs BehaviorSubject.next не был триггером

0 голосов
/ 05 июня 2018

Я работаю с угловым 5, и у меня есть проблема.Я использую BehaviorSubject в сервисе.На компоненте я потребляю эту услугу.но абоненту никогда не звонят.Во время отладки я понимаю, что у объекта BehaviorSubject нет наблюдателей.Я пытаюсь перехватить http-запрос для отображения счетчика.

SERVICE 

import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest, HttpResponse } from '@angular/common/http';
import { Injectable, OnInit } from '@angular/core';
import { BehaviorSubject } from 'rxjs/BehaviorSubject';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class HttpInterceptorProgress implements HttpInterceptor {

    private loadingCount = 0;
    public isHttpLoadingSubject = new BehaviorSubject<boolean>(false);

    public intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>>  {

        console.log('before');
        this.loadingIncrement();

        return next.handle(req).do(
            (event: HttpEvent<any>) => {
                if (event instanceof HttpResponse) {
                    console.log('ok');
                    this.loadingDecrement();
                }
            },
            (err: any) => {
                console.log('error');
                this.loadingDecrement();
            });
    }

    private loadingIncrement()
    {
        this.loadingCount = this.loadingCount + 1;
        this.isHttpLoadingSubject.next(true);
    }

    private loadingDecrement()
    {
        this.loadingCount = this.loadingCount - 1;

        if (this.loadingCount === 0)
        {
            this.isHttpLoadingSubject.next(false);
        }
    }
}

COMPONENT 

import { Component } from '@angular/core';
import { HttpInterceptorProgress } from './HttpInterceptorProgress';
import { IObservableAlive } from './IObservableAlive';

@Component({
    selector: 'loader',
    templateUrl: 'loaderComponent.html'
})
export class LoaderComponent implements IObservableAlive {

    public isAlive: boolean;
    private httpInPregress: Boolean;

    constructor(private interceptor: HttpInterceptorProgress) { }

    public ngOnDestroy(): void {
        this.isAlive = false;
    }

    public ngOnInit(): void {
        this.httpInPregress = false;
        this.isAlive = true;

        this.interceptor.isHttpLoadingSubject
            .takeWhile(() => this.isAlive)
            .subscribe((isLoading: Boolean) => {
                this.httpInPregress = isLoading;
            });
    }
}

1 Ответ

0 голосов
/ 08 июня 2018

Похоже, это была моя ошибка, я делал это на своем app.module.ts 

@NgModule({ ...
    providers: [HttpInterceptorProgress,  {
        provide: HTTP_INTERCEPTORS, 
        useClass: HttpInterceptorProgress, 
        multi: true 
    })

Это создавало 2 экземпляра службы HttpInterceptorProgress.Один из них был внедрен в компонент, другой фактически обрабатывал перехваты http-запросов.

Теперь мне нужно выяснить способ связи между перехватчиком HttpInterceptorProgress и компонентом LoaderComponent

Большое спасибо всем за ваши комментарии.

...