Используя обещание в Angular 7? - PullRequest
Новая
       30

Используя обещание в Angular 7?

0 голосов
/ 10 декабря 2018

В «старые добрые времена» AngularJS у меня была хорошая директива для кнопок и ссылок, которая показывала мне счетчик нагрузки во время http-запросов.

Теперь я попытался восстановить это с Angular 7 сейчас, но ястолкнулся с проблемами.Надеюсь, кто-нибудь может помочь, пожалуйста ...

Сначала у меня есть простой простой httpInterceptor для генерации событий при запуске http-запроса и при его остановке: 

import {
    HttpRequest,
    HttpHandler,
    HttpEvent,
    HttpInterceptor
} from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/finally';

import { LoadingService } from './loading.service';

@Injectable()
export class LoadingInterceptor implements HttpInterceptor {

    constructor(private loadingService: LoadingService) { }

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

        this.loadingService.onNotify(true)

        return next.handle(request)
                   .finally(() => { 
                       this.loadingService.onNotify(false) 
                    });
    }
}

Это работает такдалеко.Теперь я создал сервис для обработки событий: 

import { Injectable } from '@angular/core';
import { Subject, BehaviorSubject }  from 'rxjs';

@Injectable()
export class LoadingService {
//  notify: Subject<boolean> = new Subject<boolean>();
    notify: BehaviorSubject<boolean> = new BehaviorSubject(false);

    onNotify(event) {
        this.notify.next(true);
    }
}

... и, наконец, моя директива: 

import { OnInit, Directive, ElementRef, Renderer2 } from '@angular/core';
import { LoadingService } from './loading.service';

@Directive({
    selector: '[loading]'
})
export class LoadingDirective {

    constructor(
        private element: ElementRef, 
        private renderer: Renderer2, 
        private loadingService: LoadingService
    ) {
        console.log("DIRECTIVE LOADING")
        this.renderer.addClass(this.element.nativeElement, "required");

        this.loadingService.notify.subscribe((result) => {
            console.log('result', result)
        })
    }
}

Проблема в том, что это не сработает!Он успешно скомпилирован, но при попытке отображения компонента, использующего тег [loading], я получаю консольную ошибку: 

ERROR Error: "[object Object]"
    resolvePromise http://localhost:4200/polyfills.js:3159:31
    resolvePromise http://localhost:4200/polyfills.js:3116:17
    scheduleResolveOrReject http://localhost:4200/polyfills.js:3218:17
    invokeTask http://localhost:4200/polyfills.js:2766:17
    ...

Почему обещание не может быть разрешено?Где моя ошибка?Я действительно надеюсь, что у кого-то из вас есть решение моей проблемы.

...