ngx-bootstrap - tabs Angular 4 - 路由器导航

时间:2017-11-14 21:49:23

标签: angular ngx-bootstrap

我有一个问题,在我的路由器选项卡中,只需在链接上单击右键即可。如果单击链接下方或周围,则选项卡会切换,但路径不会。这个视图选项卡是空白的,我认为在链接中路由器没问题,但是tab的周围是一个事件javascript。

?p

around of tab

in link of router

1 个答案:

答案 0 :(得分:5)

尝试在组件中放入一个方法并在选项卡上单击它(单击),如下所示:



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>
&#13;
&#13;
&#13;