Отправить данные из сервиса в наблюдаемый Получить запрос - PullRequest
Новая
       9

Отправить данные из сервиса в наблюдаемый Получить запрос

0 голосов
/ 09 февраля 2020

Я новичок в Angular и Observables. У меня есть служба, которая получает URL-адрес, который я хочу передать своей наблюдаемой, и отображать данные каждый раз, когда ему передается новый URL-адрес с помощью NgFor. Любой пример поможет. Пожалуйста, помогите ничто не похоже на работу. Заранее спасибо

СЕРВИС Файл 

import { Injectable } from '@angular/core';
import { HttpClient, HttpErrorResponse, HttpHeaders, HttpParams } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Event } from '../event/event.interface';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})

export class ClientService {

  eventUrl ;

  constructor(private http: HttpClient) {
  }

 receiveEvent(eventId){
    this.eventUrl = eventId;
   console.log(this.eventUrl)
 }

renderEvent(eventUrl): Observable<Event[]>{
  return this.http
  .get<Event[]>(eventUrl)
}

ПОЛУЧЕНИЕ КОМПОНЕНТА файл 

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import { ClientService } from '../service/clientService';
import { HttpParams, HttpClient } from '@angular/common/http';


@Component({
  selector: 'hero-review',
  templateUrl: './review.component.html',
  styleUrls: ['./review.component.css']
})
export class ReviewComponent implements OnInit {

public events = [];

  constructor(private _clientService: ClientService) { 
  }

  ngOnInit() {

    this._clientService.renderEvent('Need to be dynamic URL').subscribe(data => this.events = data);
  }
}

ОТПРАВКА КОМПОНЕНТА файл 

sendEvent(eventId){
  let reqUrl = "myEndpoint" + eventId;
  this._clientService.receiveEvent(reqUrl);
}

1 Ответ

0 голосов
/ 09 февраля 2020

Мне кажется, я понимаю вашу проблему.

http.get (url) является наблюдаемым одноразового использования. Это не поток, который может быть запущен несколько раз, как субъекты. Вам нужно будет создать свою собственную тему и использовать ее в качестве прокси. 

export class ClientService {

 constructor(private http: HttpClient) {
 }

 private eventPublisher: Subject<Event[]> = new Subject<Event[]>();

 receiveEvent(eventId){
   // call http client here, and publish results to event publisher
   const eventUrl = eventId;
   this.http.get<Event[]>(eventUrl).subscribe(response => {
     this.eventPublisher.next(response);
   });
 }

 renderEvent(eventUrl): Observable<Event[]>{
  // do not subscribe to http client here, subscribe to event publisher
  return this.eventPublisher.asObservable();
 }

Это шаблон проектирования pub-sub (издатель - подписчик). Возможно, было бы полезно ознакомиться с другими решениями этого шаблона проектирования, используя Angular, поскольку это довольно тривиальный пример.

Редактировать:

Вы также можете отказаться от подписки в своем компоненте как только вы закончите с подпиской, чтобы избежать утечек памяти.

Примерно так выглядит простой шаблон: 

export class MyComponent implements OnInit, OnDestroy() {
  constructor(private myService: MyService) { }

  private destroyed: Subject<void> = new Subject<void>();

  ngOnInit(): void {
    this.myService.myMethod().pipe(
      takeUntil(() => this.destroyed)
    ).subscribe(() => { 
      // do stuff
    });
  }

  ngOnDestroy(): void {
    this.destroyed.next(undefined);
    this.destroyed.complete();
  }
}

Хотя он становится повторяющимся, если вам нужно начать это делать много. Я лично использую этот метод: { ссылка }

...