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

【问题标题】：component router not working with ng-bootstrap组件路由器不适用于 ng-bootstrap
【发布时间】：2020-01-09 15:01:35
【问题描述】：

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

之间导航

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

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

【问题讨论】：

标签： angular angular-ui-bootstrap angular2-routing ng-bootstrap

【解决方案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。

【讨论】：

稍晚 - 或者使内的占据其父级的所有空间；通过将填充从父级移动到标记。

【解决方案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>

【讨论】：

【解决方案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>

最后，将 Router Outlet 移到应用组件上并享受 ;)。

【讨论】：

尝试了这种方法（使用 ng-template 而不是 template）。问题是，仅当我单击选项卡标题文本时，选项卡内容切换才有效。当我单击任何选项卡而不是标题文本时，选项卡显示为已切换，但不会发生路由，并且内容仍然是旧选项卡的内容。

【解决方案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>

【讨论】：

【解决方案5】：

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

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

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

【讨论】：

【解决方案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）设置为 inline-block 并提供填充给它。

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

【讨论】：