退订对RXJS不起作用，正确的使用方法是什么？

Question

I made a code to monitor a map using nativescript-geolocation and nativescript-google-maps-sdk , there is an Angular service that encapsulates all access logic to nativescript-geolocation that receives a subscribe provided by a comment from Angular.

When executing the listener represented by the component.mapViewRead() function, which runs when the map is ready, it subscribes to the subscribe service by calling a method servico.gpsInfo$.subscribe((gpsInfo) => this.gpsInfo = gpsInfo) , when the user manipulates the map by changing the camera position to a new coordinate, a property representing subscripition is used by another listener responsible for manipulating the camera to disable subscribe by calling the this.subscription.unsubscribe() .

Although the subscription is theoretically disabled and can be entered through the this.subscription.isClosed property, it does not stop processing Observable calls.

Am I doing something wrong? or is it a RXJS bug?

Below is the code for both service and component.

At this link you can find the full code of the service, and below the code relevant to the problem.

startHeadingUpdates() {
        if (this.watchId) {
            return;
        }

        this.watchId = geoLocation.watchLocation(
            (loc) => {
                if (loc) {
this._gpsInfo.next(<GPSInfo>loc);
                }
            },
            (e) => {
                console.error("Error: " + e.message);
            },
            { desiredAccuracy: 3, updateDistance: 10, minimumUpdateTime: 1000 * .3 });
    }
    public get gpsInfo(): Observable<GPSInfo> {
        if (!this._gpsInfo$)
            this._gpsInfo$ = this._gpsInfo.asObservable()
        return this._gpsInfo$;
    }

Full component code can be found at this link , below only the code relevant to the problem:

// componente
    private subscribeGPSInfo() {
        if(this._gpsInfoSubscription && !this._gpsInfoSubscription.isClosed)
            this.unSubscribegpsInfo();

       this._gpsInfoSubscription = this._compass.gpsInfo.subscribe((gpsInfo) => {
            this.gpsInfo = gpsInfo;
        }, (error) => {         console.error("MussalaMapsComponent.ngAfterViewInit() _compass.gpsInfo.subscribe ", error);
        });
    }

    private unsubscribeGPSInfo() {
        if (this._gpsInfoSubscription && this._gpsInfoSubscription.closed) {
        this._gpsInfoSubscription.unsubscribe();
        }
    }

    goToMyLocation() {
        const cfg: GPSConfig = {};
        this._compass.getMyLocation(cfg)
            .then((gpsInfo: GPSInfo) => {
                this.gpsInfo = gpsInfo;
                this.mapView.latitude = this.gpsInfo.latitude;
                this.mapView.longitude = this.gpsInfo.longitude;
            });

        this.subscribeGPSInfo();
    }
    onMapReady(event) {
        const template = this.createInfoWindowTemplate();
        this.mapView.infoWindowTemplates = template;

        let marker: Marker = this._compass.createIslamicMarker(
            1,
            MakerType.MUSSALA,
            "Mussala Fortaleza",
            "Fortaleza, Ce, Brasil",
            "Rua São Paulo, 1831 - Jacarecanga, Fortaleza - CE, 60310-226",
            //-3.7214696,-38.5430259
            <GPSInfo>{ latitude: -3.7214696, longitude: -38.5430259 }
        );
        this.mapView.addMarker(marker);

        marker = this._compass.createIslamicMarker(
            2,
            MakerType.SPONSOR,
            "Curso Arduino Minas",
            "Aquiraz, Ce, Brasil",
            "R. José Alves Pereira, S/N, Aquiraz, CE, Brasil",
            {
                latitude: -3.9242100850690402,
                longitude: -38.45365650951862
            }
        );

        this.mapView.addMarker(marker);

        this.goToMyLocation();
        this.subscribeGPSInfo();

        this.isBusy = false;

    }

More Info:

 npm list rxjs
IslamicApp@ C:\Users\Admin\workspace\islamic-works\Islamic-App
+-- @angular/cli@8.1.1
| +-- @angular-devkit/architect@0.801.1
| | `-- rxjs@6.4.0
| +-- @angular-devkit/core@8.1.1
| | `-- rxjs@6.4.0
| +-- @angular-devkit/schematics@8.1.1
| | `-- rxjs@6.4.0
| +-- @schematics/update@0.801.1
| | `-- rxjs@6.4.0
| `-- inquirer@6.4.1
|   `-- rxjs@6.5.2  deduped
+-- @nativescript/schematics@0.6.0
| +-- @angular-devkit/core@7.1.4
| | `-- rxjs@6.3.3
| `-- @angular-devkit/schematics@7.1.4
|   `-- rxjs@6.3.3  deduped
+-- @ngtools/webpack@8.0.6
| +-- @angular-devkit/core@8.0.6
| | `-- rxjs@6.4.0  deduped
| `-- rxjs@6.4.0
+-- nativescript-dev-webpack@1.0.1
| `-- @angular-devkit/core@8.0.0
|   `-- rxjs@6.4.0
`-- rxjs@6.5.2

Answer 1

I went to your Github link (now dead) to try and run the app to diagnose but it is not an app. It is a code snippet. Can you setup a small example app? This will help you faster.

In the meantime, it seems you are trying to unsubscribe from this._gpsInfoSubscription which is a result of this._compass.gpsInfo.subscribe(...) .

I would suggest you take a look at NetanelBasal/ngx-take-until-destroy . Using rxjs pipe with ngx-take-until-destroy will help memory clean up more efficiently. I use it daily in my Angular applications.