I have a component who shows a list of item than can be filtered using url queryParams, thos items are paginated from the api, and if a filter is set, i need to call the first page again, this first call is in the resolver of the router, so what I need is that the router reload in the same way as if I came from other URL.
app.routes.ts
const appRoutes: Routes = [
{
path: 'applications',
component: AppComponent,
resolve: {
data: AppResolve
}
},
]
app.resolver.ts
@Injectable()
export class AppResolve implements Resolve<any> {
constructor() {}
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<any> {
// call to the api and the first 50 applications filtered by the url queryParams
}
}
app.component.ts
@Component({
// ...
})
export class AppComponent {
constructor(private route: ActivatedRoute,
private appService: AppService) {
this.route.data.subscribe((data: any) => {
// recive the first 50 applications
})
}
loadMoreApps(): void {
// call to the api for the next 50 applications filtered by the url queryParams
}
}
app.service.ts
@Injectable()
export class AppService {
constructor(private router: Router,
private route: ActivatedRoute) {}
navigate(urlQueryParams: any): void {
this.router.navigate(['/applications'], {queryParams: urlQueryParams});
}
}
other.component.ts
@Component({
// ...
})
export class OtherComponent {
constructor(private appService: AppService) {}
filterApps(): void {
const filters = {
'category': 'game',
'author': 'username'
}
this.appService.navigate(filters)
}
}
