export class DemoComponent {
    subscribed = false;
    constructor(pageService: PageService) {}

    ngOnInit() {
        this.subscribeToEvents();
        this.pageService.inPage$.subscribe(
            (inPage) => inPage ? this.subscribeToEvents() : this.clearSubscriptions();
        )
    }
    ngOnDestroy() {
        this.clearSubscriptions();
    }

    subscribeToEvents() {
        if (this.subscribed) return;
        this.subscribed = true;
    }

    clearSubscriptions() {
        if (!this.subscribed) return;
        this.subscribed = false;
    }
}

myObservable$ = this.pageService.inPage$.pipe(
    // not in page? unsubscribe to realSource$ and subscribe to NEVER
    switchMap((inPage) => inPage ? realSource$.pipe(materialize()) : NEVER),
    dematerialize()
    // materialize/dematerialize if you care about realSource$ completion from https://codeburst.io/heres-how-i-built-my-very-own-pausable-rxjs-operator-24550123e7a6
);

ngOnInit() {
   this.sub = this.myObservable$.subscribe(...);
}

ngOnDestroy() {
    this.sub.unsubscribe();
}