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

发布时间：2020-12-17 21:31:26 所属栏目：安全来源：网络整理

导读：我有一个问题,在我的路由器选项卡中,只在链接上单击右键工作.如果单击链接下方或周围,则选项卡会切换,但路径不会.并且这个视图选项卡是空白的,我认为在链接中路由器是可以的,但是tab的周围是一个事件 javascript. tabset tab ng-template tabHeading a class

我有一个问题,在我的路由器选项卡中,只在链接上单击右键工作.如果单击链接下方或周围,则选项卡会切换,但路径不会.并且这个视图选项卡是空白的,我认为在链接中路由器是可以的,但是tab的周围是一个事件 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>

解决方法

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

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>Hola putitos</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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!