Отписаться от наблюдаемого в Angular

Question

Когда я нажимаю кнопку, я получаю информацию с сервера для конкретного автомобиля. Это делается путем подписки на наблюдаемое. Когда я нажимаю на ту же кнопку еще раз, я хотел бы отписаться от текущего «vehicleDetail», на который я смотрю (чтобы избежать утечки памяти), так как я проверяю новые данные другого транспортного средства.

Я использую класс VehicleDetail со следующими свойствами:

export class VehicleDetail {
  id: number;
  name: string;
  alarm: Alarms[] | null;
  signalinfo: SignalInfo[];
  position: Position | null;
}

Вот мой код в .service.ts:

    getVehicleDetail(id: number): Observable<VehicleDetail> {
        const url = `${this.vehiclesUrl}/${id}/${'detail'}`;
        return this.http.get<VehicleDetail>(url).pipe(
          tap(_ => this.log(`fetched vehicle detail id=${id}`)),
          catchError(this.handleError<VehicleDetail>(`getVehicledetail id=${id}`))
        );
      }

и в моем .component.ts:

import { Component, OnInit } from '@angular/core';
import { Observable, Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
import * as Leaflet from 'leaflet';

import { VehicleService } from '../vehicle.services';
import { VehicleDetail } from '../models/vehicle-detail';

.........

vehicleDetail: VehicleDetail;
private unsubscribe$ = new Subject();

.........



  getVehicleDetail(): Observable<VehicleDetail> {
    const details = this.vehicleService
      .getVehicleDetail(this.vehicleService.vehicleId);

    details.takeUntil(this.unsubscribe$).subscribe(data => {
      this.vehicleDetail = data;
    });
    return details;
  }

updateInfo(item): void {
    this.unsubscribe$.next();
    this.unsubscribe$.complete();
    this.vehicleService.vehicleId = item;
    console.log(this.vehicleService.vehicleId);
    this.getVehicleDetail().takeUntil(this.unsubscribe$).subscribe(() => {
      if (this.vehicleDetail.position) {
        this.setMap();
        return;
      }
      this.map.flyTo(new Leaflet.LatLng(50.7089, 10.9746), 4, {
        animate: true,
        duration: 4
      });
    });
  }

Я получаю ошибку от takeUntil, в которой говорится:

ошибка TS2339: свойство 'takeUntil' не существует для типа 'Наблюдаемая'.

Что я здесь не так делаю?

Answer 1

http-запрос, в котором вы не создаете сокет, не нужно отписывать наблюдаемый, он завершается до завершенного состояния. И почему бы вам не вызвать службу напрямую из updateInfo с идентификатором, который вы получили в качестве параметра?

updateInfo(vehicleId: number): void {
    this.vehicleService.getVehicleDetail(vehicleId)
     .subscribe((data) => {
       this.vehicleDetail = data;
       if (this.vehicleDetail.position) {
         this.setMap();
         return;
       }
       this.map.flyTo(new Leaflet.LatLng(50.7089, 10.9746), 4, {
         animate: true,
         duration: 4
       });
     });
}