Получить последние данные из переменной, равной HttpClient.subscribe Rx js Angular - PullRequest
Новая
       33

Получить последние данные из переменной, равной HttpClient.subscribe Rx js Angular

0 голосов
/ 15 апреля 2020

У меня есть переменная, которой я назначаю подписку на запрос, я хочу получить последнее значение, выданное этой подпиской. Мой код похож на следующий 

// Service 1
public request
getData() {
    return new Observable((observer) => {
      if (this.request) this.request.unsubscribe();
      this.request = this.http.get(this.requestExploreUrl()).subscribe((data) => {
        observer.next(data);
      });
    });
  }

Я понимаю, что код не имеет особого смысла, но есть несколько компонентов, которые используют этот сервис, возможно ли подписаться на значение переменной запроса ?

Я пытался service1.request.subscribe (x => x) не работает

Также вы не можете попробовать другой service1.getData (). Subscribe (x => x) поскольку if (this.request) this.request.unsubscribe (); последняя подписка будет отменена.

1 Ответ

0 голосов
/ 16 апреля 2020

Я думаю, что вы хотите поделиться результатом вашего запроса между всеми компонентами, которым он нужен.

Взгляните на stackblitz для полной версии и learn-rx js для shareReplay

app.component.ts 

import { Component } from '@angular/core';
import { DataService } from './data.service';
import { Observable } from 'rxjs';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular';
  constructor(public dataService: DataService) {
  }

  request() {
    this.dataService.getData().subscribe()
  }
}

app.component.ts 

import { Injectable } from '@angular/core';
import { BehaviorSubject, Subject, of } from 'rxjs';
import { shareReplay, tap } from 'rxjs/operators';

@Injectable()
export class DataService {
  _data = new Subject();
  data$ = this._data.asObservable().pipe(shareReplay(1));
  constructor() { }

  getData() {
    return of(new Date().getTime())
    .pipe(
      tap((value) => this._data.next(value))
    )
  }
}

app.component. html

<button (click)=request()>Request</button>
{{ dataService.data$ | async }}
<hr>
<app-a></app-a>
<hr>
<app-b></app-b>
...