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。

Answer 2

{@ 1}}代码已被弃用。它现在是template：

ng-template

Answer 3

变化：

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

   </template>
</ngb-tab>

使用：

<ngb-tab>
   <template ngbTabTitle>
     <a routerLink="/retail/retail-add">Add</a>
   </template>
   <template ngbTabContent>

   </template>
</ngb-tab>

最后，在app组件上移动路由器插座并享受;）。

Answer 4

这可以使用nav tabs完成-我知道它不能完全解决问题，但它是可行的替代方案。实际上，例如，演示引导网站将其用于选项卡导航和href。参见https://v4-alpha.getbootstrap.com/components/navs/#tabs

我们可以嵌入routerLinks，而不必使用点击监听器。我们可以使用routerLinkActive或ngClass来激活标签页

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link" routerLinkActive [routerLink]=['path', 'to', 'component']>Tab1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" routerLinkActive [routerLink]=['path', 'to', 'component']>Tab2</a>
  </li>
</ul>

<div> 
  //Should load each tabs component from the routerLink here
  <router-outlet></router-outlet> 
</div>

Answer 5

对于任何寻求如何使路由与ng-bootstrap选项卡一起使用的解决方案的人。我制作了一个示例应用程序来演示这一点。我使用辅助路由器出口来渲染选项卡组件。

在此处查看演示： https://stackblitz.com/edit/ng-bootstrap-routable-tabs

并在此处编码： https://github.com/kashpatel/ng-bootstrap-routable-tabs

Answer 6

如果您将ng-template用于如下所示的routerlink：

<ngb-tabset #tabset="ngbTabset">
<ngb-tab id="tab1">
<ng-template ngbTabTitle>
<a class="btn-link" [routerLink]="['./nestedRoute1']">Tab1</a>
</ng-template>
</ngb-tab>
<ngb-tab id="tab2">
<ng-template ngbTabTitle>
<a class="btn-link" [routerLink]="['./nestedRoute2']">Tab2</a>
</ng-template>
</ngb-tab>
</ngb-tabset>

仅当单击标题（而不是选项卡）时，才会遇到诸如路由之类的问题，请尝试删除外部锚标记的填充，并使内部锚标记（即上述代码中的btn-link）作为内联块并提供填充

因此，该标签上的任何点击都将与带有路由器链接的内部锚标记相对应。

组件路由器不使用ng-bootstrap

6 个答案: