Loading route not working when only optional param changes

I cannot force a route reload when an optional parameter changes, even if I provide a custom transition plan:

Is this a bug?

I think transitionPlan needs to be added to the route config, not in the load() function.

Update my-app.ts to this

export class MyApp {
  static routes = [
    {
      path: '',
      redirectTo: 'product',
    },
    {
      id: 'product-route',
      path: 'product/:id?',
      component: Product,
      transitionPlan: 'replace',  // or transitionPlan: 'invoke-lifecycles',
    },
  ];
}

Update products.ts to this

this.router.load(
      {
        component: 'product-route',
        params: {
          id: 'product-1',
          optional: optionalParam,
        },
      },
      {
        context: this.routeContext.parent,
      }
    );

I thought, transitionPlan as navigation option was the goal of the following pull request:

@elitastic I think by β€œoptional” parameters you are actually referring to unconfigured parameters. Those parameters will be put to query string ultimately. And by changing the value of querystring, you cannot trigger a transition, because there are no changes in the configured part of parameters.

However, I have revisited your earlier thread and it seems that my PR not yet fully supports the Au1 use-case. Let me find a solution for that.

In the mean time, here is an working workaround: routing within same route v2 (forked) - StackBlitz

2 Likes

@elitastic The feature added in the PR does work. When I last checked your example, I have missed one little thing. There was a misconfiguration. The correction would look like as follows.

    this.router.load(
      {
        component: 'product-route',
        params: {
          id: 'product-1',
          optional: optionalParam,
        },
-       transitionPlan: 'invoke-lifecycles',
      },
      {
+       transitionPlan: 'invoke-lifecycles',
        context: this.routeContext.parent,
      }
    );

Here is a working fork.