fix(router-tabset): navigate using router link (#1146)

Fixes #188
akveo · Jan 14, 2019 · cb1c21e · cb1c21e
1 parent ea7b209
commit cb1c21e
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 31 deletions.
diff --git a/src/framework/theme/components/route-tabset/route-tabset.component.ts b/src/framework/theme/components/route-tabset/route-tabset.component.ts
@@ -5,8 +5,6 @@
  */
 
 import { Component, Input, Output, EventEmitter, HostBinding } from '@angular/core';
-import { Router } from '@angular/router';
-
 import { convertToBoolProperty } from '../helpers';
 
 /**
@@ -64,20 +62,32 @@ import { convertToBoolProperty } from '../helpers';
   styleUrls: ['./route-tabset.component.scss'],
   template: `
     <ul class="route-tabset">
-      <li *ngFor="let tab of tabs"
-          (click)="$event.preventDefault(); selectTab(tab)"
-          routerLink="{{tab.route}}"
-          routerLinkActive="active"
-          [routerLinkActiveOptions]="{ exact: true }"
-          [class.responsive]="tab.responsive"
-          [class.disabled]="tab.disabled"
-          [attr.tabindex]="tab.disabled ? -1 : 0"
-          class="route-tab">
-        <a href (click)="$event.preventDefault()" tabindex="-1">
-          <i *ngIf="tab.icon" [class]="tab.icon"></i>
-          <span *ngIf="tab.title">{{ tab.title }}</span>
-        </a>
-      </li>
+      <ng-container *ngFor="let tab of tabs">
+        <li *ngIf="tab.disabled; else enabled"
+            [class.responsive]="tab.responsive"
+            class="route-tab disabled"
+            tabindex="-1">
+          <a tabindex="-1">
+            <i *ngIf="tab.icon" [class]="tab.icon"></i>
+            <span *ngIf="tab.title">{{ tab.title }}</span>
+          </a>
+        </li>
+
+        <ng-template #enabled>
+          <li (click)="$event.preventDefault(); selectTab(tab)"
+              [routerLink]="tab.route"
+              routerLinkActive="active"
+              [routerLinkActiveOptions]="{ exact: true }"
+              [class.responsive]="tab.responsive"
+              tabindex="0"
+              class="route-tab">
+            <a tabindex="-1">
+              <i *ngIf="tab.icon" [class]="tab.icon"></i>
+              <span *ngIf="tab.title">{{ tab.title }}</span>
+            </a>
+          </li>
+        </ng-template>
+      </ng-container>
     </ul>
     <router-outlet></router-outlet>
   `,
@@ -107,13 +117,7 @@ export class NbRouteTabsetComponent {
    */
   @Output() changeTab = new EventEmitter<any>();
 
-  constructor(private router: Router) {
-  }
-
   selectTab(tab: any) {
-    if (!tab.disabled) {
-      this.changeTab.emit(tab);
-      this.router.navigate([tab.route]);
-    }
+    this.changeTab.emit(tab);
   }
 }
diff --git a/src/playground/with-layout/tabset/route-tabset-showcase.component.ts b/src/playground/with-layout/tabset/route-tabset-showcase.component.ts
@@ -9,12 +9,6 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nb-route-tabset-showcase',
   template: `
-    <nb-card>
-      <nb-card-body>
-        <nb-route-tabset [tabs]="tabs"></nb-route-tabset>
-      </nb-card-body>
-    </nb-card>
-
     <nb-card>
       <nb-card-body>
         <nb-route-tabset [tabs]="tabs" fullWidth></nb-route-tabset>
@@ -27,13 +21,13 @@ export class RouteTabsetShowcaseComponent {
     {
       title: 'Users',
       icon: 'nb-person',
-      route: '/tabset/route-tabset-showcase.component/tab1',
+      route: './tab1',
     },
     {
       title: 'Orders',
       icon: 'nb-notifications',
       responsive: true,
-      route: '/tabset/route-tabset-showcase.component/tab2',
+      route: [ './tab2' ],
     },
     {
       title: 'Transaction',