Router(-lite) route component instance

Help Requests
1

I’m in the process of migrating from the Direct Router to Router Lite. I have a parameterized endpoint 'contentPage/*name' defined like this:

static routes = [
  { path: ['home', '/'], component: import('./base/component/home'), title: '' },
  {
    path: 'contentPage/*name',
    component: import('./base/component/contentPage'),
    title: (a) => {
      return a.component.instance.contentViewModel.title();
    }
  }
  ...
];

Previously, I was able to access the component instance using the Direct Router to dynamically set the title via a method like a.component.instance.contentViewModel.title(). Is there a way to achieve the same with Router Lite—i.e., access the component instance to invoke the title method of it?

2

Hi @dspublic! This is not yet supported. For the default router, it is considered that the configurations are mostly static. Hence, the instance of the view model is not passed to the title function. In case, you need to access to view model to access the parameters, those are already available from the RouteNode, the current parameter to the title function.

In case, your use-case is something else, I would request you to elaborate that.

3

Dear Sayan751,

Thank you for your quick response.

I have a common contentPage class that dynamically builds the final page based on a name parameter. The name parameter can be values like user, product, order, etc. When contentPage is instantiated by the router, it builds the final page dynamically and also assigns a title.

The contentPage's title is determined after the page or class instantiation, so I can’t pass it as a parameter to the router configuration, and especially not as static text.

As a plan B, I’m trying set up title from canLoad method. Is that possible? But in this case, I loose router independence, besause router(-lite) specific code comes into contentPage class,instead of just being in the configuration.

4

Asking just for my understanding. If the page that is instantiated is based on a route parameter (as you have described it as name parameter), this information should already be available from the RouteNode. Do the routed view model instances provide more information towards building the title?

As a plan B, I’m trying set up title from canLoad method. Is that possible?

It might be possible to set the title on the next: RouteNode inside the canLoad hook. But it is not officially supported and thus, also not tested. Feel free to try it out. :v:

5

Okay, no worries, I try to explain it. I know that a name parameter value is available in the RouteNode, but the page title comes from the server (as the view and viewModel also), via the contentPage instance. I don’t want to outsource/duplicate this functionality from the original class because it’s too much code and it logically belongs there.

“Do the routed view model instances provide more information towards building the title?” Yes, it fetches from the server.

6

I found the solution, in case someone has this problem:

  • the RouteNode contains the component instance with the following path: tr.context.vpa._curCA._instance
  • It’s also possible to specify the title in the canLoad method

So, from this aspect, router-lite is compatible with the direct-router, and migration is possible, case closed :slight_smile:

1 Like
7

Glad that you have found a solution :partying_face:

A word of caution regarding this:

tr.context.vpa._curCA._instance

There you are accessing the internal properties which might break your code, if you use the production build (non-dev build of Au2).

It’s also possible to specify the title in the canLoad method

I am assuming that you are setting the title property of the RouteNode. In that case, it might be considered making the title property writeable, so that it is officially supported.

8

“There you are accessing the internal properties which might break your code, if you use the production build (non-dev build of Au2).”

Damn, you are right, i missed it, thank you! I can still use a workaround, but it would be great if the instance were public instead of internal.