角度rxjs主题和订阅不起作用

Question

In my service I create an observable the I will use in another component

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs/Subject';
import { Router } from '@angular/router';
import { HttpClient, HttpErrorResponse } from '@angular/common/http';


@Injectable()
export class ApiHandlerService {

    modalObject = new Subject<any>();

    constructor(
        private router: Router,
        private http: HttpClient,
    ) {}

    responseHandler(response) {
        if (response.success) {
            const obj = {
                exception: false,
                payload: response.payload
            };
            this.modalObject.next(obj);
            return obj;
        } else {
            const obj = {
                exception: true,
                message: response.exception.message,
                segNum: response.exception.seqNum
            };
            this.modalObject.next(obj);
            return obj;
        }
    }

    errorHandler(err) {
        if (err instanceof HttpErrorResponse) {
            if (err.status === 401) {
                this.router.navigate(['/app-login']);
            }
        }
    }

}

then in my component I subscribe to the observable.

import { Component, ViewChild, OnInit, OnDestroy  } from '@angular/core';
import { Subscription } from 'rxjs/Subscription';
import { ModalDirective } from 'ngx-bootstrap/modal';
import { ApiHandlerService } from 'app/services/api-handler/api-handler.service';

@Component({
    selector: 'app-api-handler-modal',
    templateUrl: './api-handler-modal.component.html'
})
export class ApiHandlerModalComponent implements OnInit, OnDestroy {

    @ViewChild('autoShownModal') autoShownModal: ModalDirective;

    isModalShown = false;
    subscription: Subscription;

    constructor(
        private apiHandlerService: ApiHandlerService
    ) {}

    ngOnInit() {
        this.subscription = this.apiHandlerService.modalObject.subscribe(obj => console.log(obj));
    }

    ngOnDestroy() {
        // this.subscription.unsubscribe();
    }

    showModal(obj?): void {
        this.isModalShown = true;
    }

    hideModal(): void {
        this.autoShownModal.hide();
    }

    onHidden(): void {
        this.isModalShown = false;
    }

}

so you can see that when I subscribe, I am just simply at this point trying to console.log the subscribe value. This seems to not be working and I am a bit too new at observables to figure what is going wrong?

Answer 1

1. Try to consume the value returned from the service in the view, this will ensure that the service is called properly from "current component"...
2. Within the service itself, place some logging statements to ensure you are reaching returnable code...

In general, this code works

ngOnInit() {
    this.allSpecies = this.birdService.getAllSpeciesFromFirebase();
    this.specieSub = this.allSpecies.subscribe(data => console.log(data));
}

Here, "allSpecies" is an observable and specieSub is a Subscription. The data will get logged as an array or wrapped object based on how service returns it.

Since a Subject is superclass of Observable, it should work as well.. Anyhow try downgrading to Observable itself and see if all code works fine...

Post any updates or logs generated

Answer 2

some reasons that may have caused this:

1.you have to add the service in the providers

    @Component({
    selector: 'app-api-handler-modal',
    templateUrl: './api-handler-modal.component.html',
    providers:[ApiHandlerService]
})

1. when you do subscribe you should do service.methodInService().subscribe() in your case

   this.apiHandlerService.responseHandler().subscribe(obj => console.log(obj)); }

2. constructor( public apiHandlerService: ApiHandlerService)