Как перезагрузить наблюдаемые с новыми данными?

Question

У меня есть служба синглтона с Observable, которая берет данные с сервера и отображает их:

class HttpService {
   constructor() {
     this.$blocks = this.managerService
      .get()
      .pipe(shareReplay(1));

   }
}

В шаблоне я использую async:

public blocks: any;

ngOnInit() {
  this.blocks = this.httpService.$blocks;
}


<div *ngFor="let block of blocks | async"></div>

Как перезагрузить эту наблюдаемую blocks | async из другого компонента, я имею в виду запрос данных и отражения sh список?

Проблема асинхронная c подписывается только один раз, и если на сервере есть изменения, я не могу их получить

Answer 1

Одним быстрым способом было бы для go async трубы и подписаться на наблюдаемое в контроллере в функции. Затем вы можете вызывать эту функцию всякий раз, когда вы sh перезагрузите данные, используя EventEmitter из дочернего компонента.

Singleton

class HttpService {
  getData() {
    return this.managerService.get()
      .pipe(shareReplay(1));
   }
}

Компонент A - контроллер

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-component-a'
})
export class ComponentA implements OnInit {
  public blocks: any;
  dataSubscription: any;

  ngOnInit() {
    this.getData();
  }

  getData() {
    if (this.dataSubscription) {  // cancel pending HTTP requests before triggering new request
      this.dataSubscription.unsubscribe();
    }

    this.dataSubscription = this.httpService.getData().subscribe(
      response => { this.blocks = response },
      error => { // handle error }
    )
  };
}

Компонент A - шаблон

<ng-container *ngIf="blocks">
  <div *ngFor="let block of blocks"></div>
</ng-container>

<app-component-b (refreshData)="getData()"></app-component-b>

Компонент B - контроллер

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-component-b',
})
export class ComponentB {
  @Output() refreshData = new EventEmitter<boolean>();

  emitRefresh() {
    this.refreshData.emit(true);
  }
}

Компонент B - шаблон

<button (mouseup)="emitRefresh()">Refresh Data</button>

Теперь данные в компоненте A будут обновляться каждый раз, когда Refresh Button нажимается в Компоненте B.

Если вас беспокоит проблема нехватки памяти, поскольку мы больше не используем async, это обрабатывается HttpClient. Поэтому нормально подписаться на HTTP-вызов в контроллере вместо шаблона.