angular - 组件路由器不适用于 ng-bootstrap

Question

我正在编写下面的代码以在选项卡和

之间导航

<ngb-tabset>
  <ngb-tab title="Add">
    <template ngbTabContent routerLink="/retail/retail-add">

    </template>
  </ngb-tab>
 <ngb-tab title="Collection">
    <template ngbTabContent routerLink="/retail/retail-collection">

      </template>
  </ngb-tab>
   <router-outlet></router-outlet>
</ngb-tabset>   

它正在显示选项卡，但是在单击选项卡时既不是路由到该组件也不是在控制台上给出任何错误。请帮忙

Answer 1

要解决仅点击标题导致内容更改的问题，您可以使用tabChange event :

component.html

<ngb-tabset (tabChange)="onTabChange($event)">
  <ngb-tab [id]="first" [title]="First">
    <ng-template ngbTabContent></ng-template>
  </ngb-tab>
  <ngb-tab [id]="second" [title]="Second">
    <ng-template ngbTabContent></ng-template>
  </ngb-tab>
</ngb-tabset> 

component.ts

onTabChange($event: NgbTabChangeEvent) {
  if ($event.nextId === 'first') {
    this.router.navigateByUrl(__your_first_url__);
  } else if ($event.nextId === 'second') {
    this.router.navigateByUrl(__your_second_url__);
  }
}

由于到目前为止讨论的所有解决方案看起来都不是最佳实践，因此我打开了 issue on GitHub that was added as a feature request .