如何在 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. 这将使用新的 URL 进行请求并响应您的dataObservable$