Abonnement unerwartet in Dienst (von erweiterten geroutet Komponente) abgebrochen

Question

Ich habe eine Basiskomponente wie folgt aus:

@Component({}) 
export class PageComponent implements OnInit, OnDestroy { 
    title: string; 

    constructor(
    /* other stuff */ 
    protected uiService: UIService) { } 

    ngOnInit() { 
    this.uiService.set('title', this.title); 
    this.uiService.set('something', false); 
    } 

    ngOnDestroy() { 
    /* cleanup */ 
    } 
} 

und mehrere gerouteten Komponenten, die sie verlängern, zum Beispiel:

@ExtendedComponent({ templateUrl: './page-one.component.html' }) 
export class PageOneComponent extends PageComponent { 
    title: string = 'Page One Title'; 
} 

@ExtendedComponent({ templateUrl: './page-two.component.html' }) 
export class PageTwoComponent extends PageComponent { 
    title: string = 'Page Two Title'; 

    ngOnInit() { 
    super.ngOnInit(); 
    /* do stuff specific to PageTwoComponent */ 
    this.uiService.set('something', true); 
    } 
} 

@ExtendedComponent decorator ist dies:

export function ExtendedComponent(annotation: any) { 
    return (target: Function) => { 
    const parentTarget = Object.getPrototypeOf(target.prototype).constructor; 

    const parentAnnotations = Reflect.getMetadata('annotations', parentTarget); 
    const metadata = new Component({ ...parentAnnotations[0], ...annotation}); 
    Reflect.defineMetadata('annotations', [metadata], target); 

    const parentParamTypes = Reflect.getMetadata('design:paramtypes', parentTarget); 
    const parentParameters = Reflect.getMetadata('parameters', parentTarget); 
    Reflect.defineMetadata('design:paramtypes', parentParamTypes, target); 
    Reflect.defineMetadata('parentParameters', parentParameters, target); 
    }; 
} 

Das Problem, das ich habe, ist mit UIService:

@Injectable() 
export class UIService { 
    private buffer: any = {}; 
    private dispatcher: Subject<any> = new Subject(); 

    constructor() { 
    this.dispatcher 
     .map(state => this.buffer = { ...this.buffer, ...state }) 
     .debounceTime(50) 
     .do(() => { /* does something */}) 
     .subscribe(); 
    } 

    set(key: string, value: any) { 
    console.log(this.dispatcher.observers); // <-- [MapSubscriber] when working 
              // <-- [] when not working 
    this.dispatcher.next({ [key]: value }); 
    } 
} 

Wenn ich zwischen Seiten mit anderen Komponenten (hier nicht gezeigt) navigieren, funktioniert alles gut. Aber wenn ich von PageOneComponent zu PageTwoComponent (beide erweitern PageComponent), Dispatcher Thema in UIService läuft funktioniert (console.log in Set-Methode zeigt ein leeres Array nach ein paar Anrufe).

Ich weiß nicht, warum das passiert oder was es verursachen könnte. Irgendwelche Ideen?

Answer 1

Sie übergeben keine Funktionen an die subscribe() -Methode. So Subskriptionen werden von Garbage Collector