feat(route tabset): add support for NavigationExtras options (#2753)

Author: andreipadolin

src/app/playground-components.ts

@@ -1289,6 +1289,12 @@ export const PLAYGROUND_COMPONENTS: ComponentLink[] = [
             component: 'RouteTabsetShowcaseChild2Component',
             name: 'Route Tabset Showcase Child2',
           },
+          {
+            path: 'tab3',
+            link: '/tabset/route-tabset-showcase.component/tab3',
+            component: 'RouteTabsetShowcaseChild3Component',
+            name: 'Route Tabset Showcase Child3',
+          },
         ],
       },
       {

src/framework/theme/components/route-tabset/route-tabset.component.ts

@@ -99,6 +99,13 @@ import { convertToBoolProperty, NbBooleanInput } from '../helpers';
               routerLinkActive="active"
               [routerLinkActiveOptions]="activeLinkOptions"
               [class.responsive]="tab.responsive"
+              [queryParams]="tab.queryParams"
+              [queryParamsHandling]="tab.queryParamsHandling"
+              [fragment]="tab.fragment"
+              [preserveFragment]="tab.preserveFragment"
+              [skipLocationChange]="tab.skipLocationChange"
+              [replaceUrl]="tab.replaceUrl"
+              [state]="tab.state"
               tabindex="0"
               class="route-tab">
             <a tabindex="-1" class="tab-link">

src/playground/with-layout/tabset/components/route-tabset-children.component.ts

@@ -23,3 +23,15 @@ export class RouteTabsetShowcaseChild1Component {
 })
 export class RouteTabsetShowcaseChild2Component {
 }
+
+@Component({
+  selector: 'nb-route-tabset-showcase-child3',
+  template: `<p>Hello world</p>`,
+  styles: [`
+    :host p {
+      padding: 1.25rem;
+    }
+  `],
+})
+export class RouteTabsetShowcaseChild3Component {
+}

src/playground/with-layout/tabset/route-tabset-showcase.component.ts

@@ -29,6 +29,14 @@ export class RouteTabsetShowcaseComponent {
       responsive: true,
       route: [ './tab2' ],
     },
+    {
+      title: 'Query params',
+      icon: 'flash-outline',
+      responsive: true,
+      disabled: false,
+      route: './tab3',
+      queryParams: { param1: 123456, param2: 'test' },
+    },
     {
       title: 'Transaction',
       icon: 'flash-outline',

src/playground/with-layout/tabset/tabset-routing.module.ts

@@ -9,6 +9,7 @@ import { RouterModule, Route} from '@angular/router';
 import {
   RouteTabsetShowcaseChild1Component,
   RouteTabsetShowcaseChild2Component,
+  RouteTabsetShowcaseChild3Component,
 } from './components/route-tabset-children.component';
 import { RouteTabsetShowcaseComponent } from './route-tabset-showcase.component';
 import { TabsetBadgeComponent } from './tabset-badge.component';
@@ -36,6 +37,10 @@ const routes: Route[] = [
         path: 'tab2',
         component: RouteTabsetShowcaseChild2Component,
       },
+      {
+        path: 'tab3',
+        component: RouteTabsetShowcaseChild3Component,
+      },
     ],
   },
   {

src/playground/with-layout/tabset/tabset.module.ts

@@ -16,6 +16,7 @@ import { TabsetWidthComponent } from './tabset-width.component';
 import {
   RouteTabsetShowcaseChild1Component,
   RouteTabsetShowcaseChild2Component,
+  RouteTabsetShowcaseChild3Component,
 } from './components/route-tabset-children.component';
 import { TabsetDisabledComponent } from './tabset-disabled.component';
 
@@ -30,6 +31,7 @@ import { TabsetDisabledComponent } from './tabset-disabled.component';
     RouteTabsetShowcaseChild1Component,
     RouteTabsetShowcaseChild2Component,
     TabsetDisabledComponent,
+    RouteTabsetShowcaseChild3Component,
   ],
   imports: [
     NbTabsetModule,