3

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

<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>

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

4

6 回答 6

4

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

组件.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>

组件.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__);
  }
}

由于到目前为止讨论的所有解决方案看起来都不是最佳实践，因此我在 GitHub 上打开了一个作为功能请求添加的问题。

于 2017-06-23T09:14:00.537 回答
2

该template标签已被弃用。现在是ng-template：

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

   </ng-template>
</ngb-tab>
于 2017-05-11T13:23:56.243 回答
1

这可以使用来完成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>
于 2018-12-03T21:28:01.983 回答
1

改变：

<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>

最后，将Router Outlet移到应用程序组件上并享受；）。

于 2017-01-11T13:20:39.837 回答
0

如果您使用 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 ）作为内联块并为其提供填充。

因此，在选项卡上的任何点击都将对应于带有路由器链接的内部锚标记。

于 2020-01-09T07:01:35.617 回答
0

对于任何来寻找如何使路由与 ng-bootstrap 选项卡一起使用的解决方案的人。我制作了一个示例应用程序来证明这一点。我使用辅助路由器插座来呈现选项卡组件。

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

和这里的代码： https ://github.com/kashpatel/ng-bootstrap-routeable-tabs

于 2019-12-14T03:09:42.430 回答