如何在 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 并再次收到请求。 所以我再次订阅了新的。 但我已经订阅了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

如果您有任何未完成的 observable，您应该始终取消订阅它。

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();
    }

    ...