Update Params without Navigation API

api.ts

// Existing API
export interface NavigationExtras {
  relativeTo?: ActivatedRoute|null;
  queryParams?: Params|null;
  fragment?: string;
  preserveQueryParams?: boolean;
  queryParamsHandling?: QueryParamsHandling|null;
  preserveFragment?: boolean;
  skipLocationChange?: boolean;
  replaceUrl?: boolean;
}

// New, internal type scoped only to the pieces that are relevant to this new API
declare type PartialNavigationExtras = Pick<NavigationExtras, 'fragment' | 'queryParams' | 'queryParamsHandling' | 'preserveFragment' | 'replaceUrl'>;

class Router {
  // ...

  /* Setting query parameters or fragment. This doesn't require any scope as query params and fragment 
   * are at the root/global. */
  public setParams(extras: PartialNavigationExtras);
  /* Matrix params can be set for a given ActivatedRoute. The API would also allow for setting query 
   * params and fragment in the same call with the optional last argument. */
  public setParams(
    activatedRouteOrOptions: ActivatedRoute,
    params: Params|null, 
    extras?: PartialNavigationExtras
  );

  // ...
}

const r = new Router();

example_usage.ts

@Component({...})
class GridComponent {
  constructor(private router: Router, private route: ActivatedRoute) {
    
    // Subscribe to parameter changes. In this way, the component can sort on initial
    // startup as well as on changes to matrix parameters.
    route.paramMap.subscribe(p => {
      this.sort(p.column, p.order);
    });
    
  }
  
  sort(column: string, order: 'asc' | 'desc') {
    // do sortation logic...
  }
  
  // Set the sort options without executing a navigation. `router.queryParamMap` will
  // receive the updated values, and sortation will be updated.
  setSort(column: string, order: 'asc' | 'desc') {
    this.router.setParams(this.route, {column: 'date', order: 'asc'});
  }

}

@Injectable()
class PreferencesService {
  constructor(private router: Router) {}
  
  // Color theme stored in the URL
  changeTheme(theme: 'light' | 'dark') {
    
    // In this case, since it's updating only query params, we don't need ActivatedRoute.
    this.router.setParams({queryParams: {theme: 'dark'}, queryParamsHandling: 'merge'});
  }
}

@Component({...})
class PreferencesComponent {
  constructor(private preferences: PreferencesService, private toast: ToastService) { }
  
  setTheme(theme: 'light' | 'dark') {
    this.preferences.changeTheme(theme);
    this.toast.show(`Theme has been changed to ${theme}`);
  }
}