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

    ...