Navigate without navigation events

nav_no_events.ts

/*
 * The first piece is to add an option to RunGuardsAndResolvers that ignores optional params.
 * With this option enabled, we would only run guards and resolvers for required params,
 * ignoring optionals (matrix and query params).
 */

export type RunGuardsAndResolvers = 'paramsChange' | 'paramsOrQueryParamsChange' | 'always' | 
  'pathParamsChange'; // last option is new

// With the above option, we should see these tests pass:

router.resetConfig([
{
  path: 'a/:id',
  runGuardsAndResolvers: 'pathParamsChange',
  component: RouteCmp,
  canActivate: ['logRunCountGuard'],
  resolve: {data: 'aggregateResolveCounts'}
}]);

router.navigateByUrl('/a/1');

// First navigation will run guards and resolvers
expect(guardRunCount).toEqual(1);
expect(resolves).toEqual([{data: 0}]);

router.navigateByUrl('/a/1;p=1&q=2');

// Only change is optional params. Do not run guards or resolvers.
expect(guardRunCount).toEqual(1);
expect(resolves).toEqual([{data: 0}]);

router.navigateByUrl('/a/2;p=1&q=2');

// Update to path param results in guards & resolvers running
expect(guardRunCount).toEqual(1);
expect(resolves).toEqual([{data: 0}]);

// *****************************************
// *****************************************

/*
 * We also need a way to update the route state without causing a
 * navigation. This is useful for things such as syncing current UI
 * state into the URL without running all the navigation events.
 * Common example would be changing client side sort order of a table.
 * This might change a matrix param in the URL, but doesn't need
 * to go through guards and resolvers (can use the above option
 * to achieve this result) and don't want navigation events to kick
 * off as these may be tracking things such as performance metrics.
 * In a case like above, it's likely an applicaton might want to
 * ignore normal navigation events.
 */

// Adding an option to the current APIs is the most straight
// forward way to achieve this result. The NavigationExtras
// type already has booleans such as `skipLocationChange`,
// `replaceUrl`, and other per-navigation options. It would look
// something like this:

export class MyGridComponent {
  onSortChange(column: string, direction: string) {
    updateGridSort(column, direction);
    // this would result in going to the current URL, but tacking on matrix
    // params of `column` and `direction`. The second argument is
    // NavigationExtras, and we would pass the new `eventStrategy` option.
    this.router.navigate(['./', {column, direction}], {eventStrategy: 'silent'});
  }
}