nb-route-tabset with parameters in URL

[aqsdc1]

Issue type

I'm submitting a ... (check one with "x")

• bug report
• feature request

Issue description

Current behavior:

When using nb-route-tabset, the parameters are never sent correctly because the URL we provide is considered as a simple string. Which means that when we arrive at the targeted component, we cannot fetch data by reading the route parameters.

Expected behavior:

Being able to use parameters in the URL. Probably asking for an array in the route property and navigate to it in the NbRouteTabsetComponent should be enough ?

Steps to reproduce:

Related code:

Have a Groups module with these routes :

const routes: Routes = [
  {
    path: 'groups',
    children: [
      {
        path: '',
        component: GroupListComponent,
      },
      {
        path: ':id',
        component: GroupComponent,
        children: [
          {
            path: '',
            redirectTo: 'detail',
            pathMatch: 'full',
          },
          {
            path: 'detail',
            component: GroupDetailComponent,
          },
          {
            path: 'edit',
            component: GroupEditComponent
          }
        ],
      },
    ],
  }
];

In the GroupComponent ( I tried different way to define the route):

  ngOnInit() {
    this.route.params.subscribe(
      params => {
        this.tabs = [
          {
            title: 'Detail',
            route: ['groups' + params['id'] + '/detail'],
          },
          {
            title: 'Edit',
            route: '/groups/' + params['id'] + '/edit'
          },
        ];
      }
    );
  }

with this template : <nb-route-tabset [tabs]="tabs"></nb-route-tabset>

In the GroupDetailComponent:

ngOnInit() {
    this.route.params.switchMap(
      params => this.groupService.getGroup(params['id'])
    ).subscribe(group => this.group = group);
  }

Other information:

npm, node, OS, Browser

<!--
Node, npm: `node --version` and `npm --version`
OS: Windows (7/8/10). Linux (incl. distribution). macOS (El Capitan? Sierra?)
Browser: Chrome/Safari/Firefox/etc?
-->

node: v8.9.4
npm: 5.6.0
OS: Ubuntu 1604
Browser: firefox

Angular, Nebular

<!--
Check your `package-lock.json` or locate a `package.json` in the `node_modules` folder.
-->

[developcodeza-chris]

Hi, any update on this?

[suppadeliux]

Still nothing :(,

[yggg]

Hi guys! Fix planned on 3.2.0 release. Then you will be able to set route in any way supported by routerLink.

As a workaround, for now, you can provide dynamic values only via single strings. Like this:

this.route.params.subscribe(params => {
  this.tabs = [
    {
      title: 'Detail',
      route: `/groups/${params.id}/detail`,
    },
  ];
});

[Cvele85]

Hello, I've got a problem that I would like to add the route NavigationExtras and I can not find the right way. Im asking for help!

Examples I tried:

  this.tabs = [
    {
      title: this.translate.instant("pages.general.tabs.details"),
      responsive: true,
      route: [[`/reviews/events/types/${params.id}`], { queryParams: { returnUrl: this.returnUrl } }],
      tag: { queryParams: { returnUrl: this.returnUrl } },
      queryParams: { returnUrl: this.returnUrl },
      icon: 'list-outline',
    },

  this.tabs = [
    {
      title: this.translate.instant("pages.general.tabs.details"),
      responsive: true,
      route: [`/reviews/events/types/${params.id}?returnUrl=${this.returnUrl }`],
      tag: { queryParams: { returnUrl: this.returnUrl } },
      queryParams: { returnUrl: this.returnUrl },
      icon: 'list-outline',
    },