如何用新数据重新加载 observable？

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>

如何从另一个组件重新加载这个 observable blocks | async，我的意思是再次请求数据和刷新列表？

问题是只有一次订阅是异步的，如果服务器发生变化我无法获取它们

Answer 1

一种快速的方法是放弃 async 管道并在函数中订阅控制器中的可观察对象。然后，只要您希望使用子组件中的 EventEmitter 重新加载数据，就可以调用此函数。

单例

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中的数据会在组件B中每次按下Refresh Button时刷新。

如果您担心内存占用问题，因为我们不再使用 async，它由 HttpClient 处理。所以在controller而不是template中订阅HTTP调用是正常的。

如何用新数据重新加载 observable？

How to reload observable with new data?

angular

angular6

angular8