ngx-bootstrap - tabs角度4 - ルーターのナビゲート

Question

ルータのタブに1つの問題があります。リンクを右クリックするだけです。リンクの下またはリンクをクリックすると、タブは切り替わりますが、ルートは切り替わりません。このビューのタブは空白ですが、リンクではルータはOKですが、タブの周りはイベントの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

あなたは私を助けることができますか？

Answer 1

はこのように、コンポーネントのメソッドを入れてみてくださいと（クリック）上でそれを呼び出すタブ自体に：

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>