Winkel-Service mit dem Betreff Beobachtbaren Aufruf von next() ist nicht ersichtlich Komponente Abonnements

Möchte ich abrufen einer aktualisierten Objekt-Wert (Kreditnehmer) von schräg-Dienst. Ich habe eine RxJS Subject im Dienst, so dass mehrere Komponenten können ihn abonnieren und erhalten Sie den aktualisierten Wert.

Wenn ich lese das Thema durch die erbrachte Leistung in der Komponente finde ich, dass die onNext() Funktion argument wird nie genannt, auch wenn .next() ist aufgerufen, aus BorrowerService.

Wenn ich es abonnieren, in dem BorrowerService Klasse finde ich, dass .next() funktioniert wie erwartet. Es scheint, dass das Thema ist eine andere Instanz zwischen der Service-Klasse, die Aufrufe .next() und die Komponente, und also nicht, dass Abonnement.

Ist dies ein Versagen im Verständnis Eckige Dienstleistungen oder Observablen? Wie kann ich aktualisieren Sie den Wert in der Service-und passiv erhalten die änderungen in der Komponente, ohne es zu wissen, Wann der Anruf .next()?

Kreditnehmer-Bericht.Komponente.ts

@Component({
    ...
    providers:   [BorrowerService]
})
export class BorrowerReport {
    private borrower: Borrower;

    constructor(private borrowerService: BorrowerService) {
        this.borrowerService.borrowerChanged.subscribe(borrower => {this.borrower = borrower});
    }
}

Kreditnehmer.service.ts

@Injectable()
export class BorrowerService {
    public borrowerChanged: Subject<Borrower> = new Subject<Borrower>();

    //event handler
    selectBorrower(borrower: Borrower) {
        this.borrowerChanged.next(borrower);
    }
}
InformationsquelleAutor MattTreichel | 2017-10-06
  1. 7

    Das problem ist der Umfang des Service -, und dass ein @ngModule ist, den Dienst nicht zu erbringen. Wenn Sie wollen, dass dies ein singleton-service (gleiche service-Instanz für mehrere Komponenten), dann werden Sie wollen, um den Dienst in einer übergeordneten Modul enthält alle Kinder, die Komponenten. Für eine garantierte route, fügen Sie diese zu Ihrem app.module.ts. Importieren Sie Sie in das Modul, und stellen Sie es als service, wie Sie in der Komponente (entfernen Sie Sie, als Anbieter, die von der Komponente, aber... Sie wollen nur das übergeordnete Modul zu versorgen).

    Können Sie dann importieren des Dienstes in Ihre Komponenten, wie Sie bereits haben, und die provider wird das übergeordnete Modul. Die Grundidee ist, die dem übergeordneten Modul wird Gastgeber der Dienst für alle Kinder, die Komponenten, und somit alle Kinder der Komponenten, erhalten die gleiche Instanz des Dienstes (und somit auch die gleichen Werte).

    Seite Hinweis: Diese SO Beantworten stellt die details über das erstellen einer singleton-service-Aufruf ApiService und sollte als ein solides Handbuch. Die anderen top-Antworten bietet eine solide Erklärung, wie gut.

    Zweiter Hinweis: Wenn Sie möchten push-updates von Ihrem Thema haben, werden Sie wollen wollen, verwenden Sie eine BehaviorSubject als gut. Abonnements BehaviorSubject wird automatisch aktualisiert, während die Abonnements von Themen aufgerufen werden muss, manuell.

    • Dies hat mir geholfen, der service war zweimal instanziiert. Danke!!!
    InformationsquelleAutor Z. Bagley
  2. 2

    Folgendes :

    Kreditnehmer.service.ts

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


@Injectable()
export class BorrowerService {

  public borrowerChanged = new BehaviorSubject<string>('Defaut Value');
  borrowerChangedObservable = this.borrowerChanged.asObservable();
  constructor(){}

  changeValue(value: string): void {
    this.borrowerChanged.next(value);
  }
}

    und dann in der Komponente:

    Kreditnehmer-Bericht.Komponente.ts

    bekommen die Werte, die Sie tun:

    constructor(private borrowerService: BorrowerService) {
    this.borrowerService.borrowerChangedObservable
       .subscribe((borrower) => {
              console.log(borrower);
          });
    }

    einen neuen Wert, den Sie tun:

    sendNewValueToBorrowerService(){
this.borrowerService.changeValue('my new value');
}

    und vergessen Sie nicht, fügen Sie den Dienst in der stellt die array-und die Komponente in der array-Deklarationen des gleichen Moduls.

    • Für rxjs 6.x kürzen Sie die Zeile importieren: importieren {BehaviorSubject} aus 'rxjs';
    InformationsquelleAutor Hamed Baatour
Schreibe einen Kommentar