在Angular中,可以使用HttpClient
来发送GET请求并获取数据。为了在参数更改后重新获取数据,可以使用BehaviorSubject
来存储参数,并使用switchMap
操作符来监听参数的变化并发送GET请求。
首先,在你的组件或服务中,创建一个BehaviorSubject
来存储参数:
import { BehaviorSubject } from 'rxjs';
export class YourComponent {
private queryParams = new BehaviorSubject({});
queryParams$ = this.queryParams.asObservable();
constructor(private http: HttpClient) { }
updateQueryParams(params: any) {
this.queryParams.next(params);
}
fetchData() {
this.queryParams$.pipe(
switchMap(params => this.http.get('your-api-url', { params }))
).subscribe(data => {
// 处理获取到的数据
});
}
}
在上面的代码中,queryParams$
是一个Observable
,它会发出参数的新值。updateQueryParams
方法用于更新参数的值。fetchData
方法订阅queryParams$
,并使用switchMap
操作符在参数更改后发送GET请求。
然后,在你的组件模板中,你可以使用queryParams$
和updateQueryParams
来更新参数并重新获取数据:
export class YourComponent {
// ...
ngOnInit() {
this.fetchData();
}
}
上述代码示例中,当按钮被点击时,调用updateQueryParams
方法来更新参数,并触发fetchData
方法重新获取数据。
请替换your-api-url
为你的实际API地址,并根据你的需求修改代码。