I am currently working with Angular 5 and have encountered the following issue:
Within my route, I have a parameter called year. The component related to this route is supposed to display data based on the year parameter, which is fetched from a service. Initially, when I navigate to the URL with the year parameter, everything works as expected. However, when I update the year parameter, the component does not reload (as anticipated) and only the ngOnInit() method is called again. In this method, I attempt to reload the data by invoking the service method with the new year, but it does not function properly. Below is the code snippet:
test.component.ts:
public ngOnInit() {
this.route.paramMap.subscribe( params => {
if (params.has('year')) {
this.loadData(params.get('year'));
} else {
this.loadData();
}
});
}
public loadData(year?: string): void {
this.testService.getData(year).subscribe(data => {
// edit and assign to variables
});
}
test.service.ts:
public getData(year) {
return Observable.forkJoin(
this.getPart1(year),
this.getPart2(year)
);
}
private getPart1(year): Observable<CustomObject[]> {
let url = this.baseUrl;
if (year) url = url.concat("?year=" + year);
return this.http.get<CustomObject[]>(url, httpOptions).pipe(
catchError(this.handleError<CustomObject[]>())
)
}
private getPart2(year): Observable<OtherCustomObject[]> {
let url = this.baseUrl + '/path';
if (year) url = url.concat("?year=" + year);
return this.http.get<OtherCustomObject[]>(url, httpOptions).pipe(
catchError(this.handleError<OtherCustomObject[]>())
)
}
Is there a way to force the Observable to reload the HTTP request? I attempted using a (Replay)Subject instead of Observables, but it did not yield the desired outcome.
Any assistance on this matter would be greatly appreciated :)