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',