如何在Angular中重新加载可观察的http

Question

我有一个图表组件，它从http:加载数据

export class BarChartComponent implements OnInit {
    dataObservable: Observable<any>;
    
    constructor(private httpClient: HttpClient){
         this.dataObservable =  this.httpClient.get<any[]>(response.dataEndpoint);
    }
    
    ngOnInit() {
        this.dataObservable.subscribe((data: any) => {
            //draw chart
        })
    }
    
    search() {
        this.dataObservable = this.httpClient.get<any[]>(`${this.dataEndpoint}/category=123`);
        
        this.dataObservable.subscribe((data: any) => {
            //draw chart
        })
    }
}

我在构造函数中设置了dataObservable，并订阅了ngOnInit()函数。但我使用查询字符串更改了URL，并再次收到请求。所以我再次订阅了new。但是我已经订阅了ngOnInit()。

我可以在不重新订阅的情况下重新加载observable吗？

Answer 1

随着时间的推移，所有需要更改的内容都可以推送到一个主题中。考虑到这一点，以下解决方案应该符合您的需求：

export class BarChartComponent implements OnInit {
  url$: Subject<string> = new Subject();
  
  dataObservable$: Observable<any> = url$.pipe(
    switchMap(url => this.httpClient.get<any[]>(url))
  );
  
  search(url) {
    this.url$.next(url);
  }
  
  ngOnInit() {
    this.dataSubscription = this.dataObservable.subscribe((data: any) => {
      //draw chart
    })
  }
  
  ngOnDestroy() {
    this.dataSubscription.unsubscribe();
  }
}

每当url$发生变化时，你就把它推到主题上。然后通过switchMap访问内部httpClient get函数。这将使用新的URL请求并响应您的dataObservable$

Answer 2

您可以使用async管道。

将http调用结果分配给组件中的主题变量。

export class BarChartComponent implements OnInit {
    dataObservable: Subject<any>;
    constructor(private httpClient: HttpClient){}
    ngOnInit() {
        this.dataObservable =  this.httpClient.get<any[]>(GET_URL);
    }
    search() {
        this.dataObservable = this.httpClient.get<any[]>(GET_URL);
    }
}

然后可以在html文件中处理订阅，如下所示：

<div *ngFor="let item of dataObservable | async">
    // code here
</div>

或

<ng-container *ngIf="dataObservable | async as items">
    // result can be accessed by items
</ng-container>

你可以在这里或这里进一步阅读。

Answer 3

如果您有任何未最终确定的可观察内容，您应该始终取消订阅。

export class BarChartComponent implements OnInit, OnDestroy {
    dataObservable: Observable<any>;
    dataSubscription: Subscription;
    constructor(private httpClient: HttpClient){
         this.dataObservable =  this.httpClient.get<any[]>(response.dataEndpoint);
    }
    ngOnInit() {
        this.dataSubscription = this.dataObservable.subscribe((data: any) => {
            //draw chart
        })
    }
    ngOnDestroy() {
        this.dataSubscription.unsubscribe();
    }
    ...