ngx-bootstrap - tabs Angular 4 - Router navigate

user_8914620 0
Viewed 8131

i have one problem , in my tabs with router, only clicking right on the link works. if you click below or around the link the tab switches but the route does not. and this view the tab is blank, i view that in link the router is ok , but around of tab is a event javascript.

<tabset >
    <tab>
        <ng-template tabHeading>
                <a class="routing_link" [routerLink]="['/VariablesParamCrear']" >Asociar</a>
        </ng-template>
    </tab>
    <tab [active]="tabset" >
        <ng-template tabHeading>
            <a class="routing_link" [routerLink]="['/VariablesParamCrear']">Crear</a>
        </ng-template>
        <h1>Hola putitos</h1>
    </tab>
    <tab>
        <ng-template tabHeading>
                <a class="routing_link" [routerLink]="['/VariablesOrder']">Ordenar</a>
        </ng-template>
    </tab>
    <tab>
        <ng-template tabHeading>
                <a class="routing_link" [routerLink]="['/VariablesFilter']">Filtrar</a>
        </ng-template>
    </tab>

around of tab

in link of router

ngx-bootstrap angular
1 Answers

Try putting a method in the component and call it on (click) on the tab itself, like this: 

import {
  Component,
  OnInit
} from '@angular/core';
import {
  Router
} from '@angular/router';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.less']
})
export class MyComponentComponent implements OnInit {

  constructor(private router: Router) {}

  ngOnInit() {}

  goToLink(link: string): void {
    this.router.navigateByUrl(link);
  }
}
<tabset>
  <tab (click)="goToLink('/VariablesParamCrear')">
    <ng-template tabHeading>
      Asociar
    </ng-template>
  </tab>
  <tab [active]="tabset" (click)="goToLink('/VariablesParamCrear')">
    <ng-template tabHeading>
      Crear
    </ng-template>
    <h1>Title</h1>
  </tab>
  <tab (click)="goToLink('/VariablesOrder')">
    <ng-template tabHeading>
      Ordenar
    </ng-template>
  </tab>
  <tab (click)="goToLink('/VariablesFilter')">
    <ng-template tabHeading>
      Filtrar
    </ng-template>
  </tab>
</tabset>

user_50454670
Related