如何用新数据重新加载可观察到的数据？

Question

我具有带有Observable的singltone服务，该服务从服务器获取数据并显示它：

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，我的意思是再次请求数据和刷新列表？

问题只有一次订阅才异步，如果服务器中有更改，我将无法获得它们

Answer 1

一种快速的方法是放弃async管道并订阅函数中控制器中的可观察对象。然后，只要您希望使用子组件中的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>

组件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>

现在每次在组件B中按下Refresh Button时，都会刷新组件A中的数据。
如果您由于我们不再使用async而担心内存超标问题，则由HttpClient处理。因此，通常在控制器而不是模板中订阅HTTP调用。