Arbeiten mit Typoskript-Services und Observables: Warum wird mein Event-Handler nicht ausgeführt?

Question

Ich arbeite mit einem Angular 2-Projekt. Ich versuche mit Observablen und Services in Typoskript zu arbeiten. Ich feuere ein Ereignis, aber der Ereignishandler in meinem Observable wird nicht ausgeführt.

Hier ist mein Code:

Der Service:

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

@Injectable() 
export class AllDataPageService { 

    receptorFilterChanged$ = new Subject<any>(); 

} 

Der Service besteht aus einem Ereignis: receptorFilterChanged.

Hier ist die Komponente, die das Ereignis (unter ~ \ src \ Ergebnisse \ app \ all-data-Seite)

import { AllDataPageService } from './all-data-page.service'; 

... 

@Component({ 
    selector: 'all-data-page', 
    templateUrl: './all-data-page.component.html', 
    styles: [require('./all-data-page.style.scss')], 
    providers: [AllDataPageService] 
}) 
export class AllDataPageComponent implements OnInit { 

... 

    constructor(private allDataPageService: AllDataPageService) {} 

... 

filterByReceptorTag() { 

... 

this.allDataPageService.receptorFilterChanged$.next(50.0); 

... 

} 

... 

} 

So ist es die Linie .next $ (this.allDataPageService.receptorFilterChanged feuert 50.0) in der Funktion filterByReceptorTag() darüber, die das Ereignis auslöst. Ich habe im Chrome-Debugger bestätigt, dass diese Zeile ausgeführt wird.

Hier ist die Komponente, die die receptorFilterChanged Ereignis behandelt (unter ~ \ src \ Ergebnisse \ shared app \ \ components \ all-data-Reihe)

import { AllDataPageService } from '../../../all-data-page/all-data-page.service'; 

... 

@Component({ 
    selector: 'all-data-row', 
    templateUrl: './all-data-row.component.html', 
    styles: [ require('./all-data-row.style.scss') ], 
    encapsulation: ViewEncapsulation.None, 
    providers: [AllDataPageService] 
}) 
export class AllDataRowComponent implements OnInit { 

... 

    constructor(private allDataPageService: AllDataPageService) { 
     this.allDataPageService.receptorFilterChanged$.subscribe(
      (value) => { 

... 

      } 
    ); 
    } 

... 

} 

Wenn die receptorFilterChanged Brände, die Ereignishandler, Ich abonniere oben läuft nicht.

Kann jemand sehen, was vor sich gehen könnte?

Danke.

Answer 1

Ihr "AllDataPageService" ist für die AllDataPageComponent und auch die AllDataRowComponent beschränkt. Das bedeutet, dass jede dieser Komponenten eine neue Instanz dieses AllDataPageService-Dienstes erhält.

Sie sollen die

providers: [AllDataPageService] 

von jedem Ihrer Komponenten entfernen und es zu einem „Modul“ statt bewegen. Auf diese Weise haben Sie nur eine Instanz Ihres Dienstes, so dass sie miteinander sprechen können.

Answer 2

Kann jemand sehen, was vor sich gehen könnte?

Timing-Problem. subscribe passiert nach next, so erhält nicht den ursprünglichen Wert