为 ng-bootstrap tabset 实现手动导航

Question

目前，当我 select "Client" 选项卡时，内容会打开，当我 select "Rate card" 选项卡时，价目表的内容会打开，但是当我使用底部的箭头时，导航不起作用。我如何将导航应用于箭头，以便当我 select 箭头移动到 "Client" ,"Rate card","Burst"...

<ngb-tabset>
        <ngb-tab title="Client">
        <ng-template ngbTabContent>
        ..content....
        </ng-template>
        </ngb-tab>
        </ngb-tabset>

        <ngb-tabset>
        <ngb-tab title="Rate card">
        <ng-template ngbTabContent>
        ..content....
        </ng-template>
        </ngb-tab>
        </ngb-tabset>

        <ngb-tabset>
        <ngb-tab title="Brust">
        <ng-template ngbTabContent>
        ..content....
        </ng-template>
        </ngb-tab>
        </ngb-tabset>

        <ngb-tabset>
        <ngb-tab title="Contract Condition">
        <ng-template ngbTabContent>
        ..content....
        </ng-template>
        </ngb-tab>
        </ngb-tabset>

         <div class="actions">
                      <a class="btn btn-circle btn-icon-only btn-default">
                        <i class="fa fa-chevron-left"></i>
                      </a>
                      <a class="btn btn-circle btn-icon-only btn-default">
                        <i class="fa fa-chevron-right"></i>
                      </a>

          </div>

Answer 1

使用@ViewChild()你可以获得标签集的引用。

然后单击按钮，您可以使用一种方法来触发以下内容：

this.tabset.select(id);

通过为每个 ngb-tab 添加一个 id 来设置这个 id:

 <ngb-tab id="tab-selectbyid2">

然后使用您的按钮和（单击）事件，您可以执行 .ts 文件中的代码以在它们之间移动。

例如：

     <ngb-tabset #tabset>
    <ngb-tab id="client" title="Client">
      <ng-template ngbTabContent>
        ..content....
      </ng-template>
    </ngb-tab>
  </ngb-tabset>

  <ngb-tabset>
    <ngb-tab title="Rate card" id="rate-card">
      <ng-template ngbTabContent>
        ..content....
      </ng-template>
    </ngb-tab>
  </ngb-tabset>

  <ngb-tabset>
    <ngb-tab title="Brust">
      <ng-template ngbTabContent>
        ..content....
      </ng-template>
    </ngb-tab>
  </ngb-tabset>

  <ngb-tabset>
    <ngb-tab title="Contract Condition" id="contact-contition">
      <ng-template ngbTabContent>
        ..content....
      </ng-template>
    </ngb-tab>
  </ngb-tabset>

  <div class="actions">
    <a class="btn btn-circle btn-icon-only btn-default" (click)="left();">
      <i class="fa fa-chevron-left"></i>
    </a>
    <a class="btn btn-circle btn-icon-only btn-default" (click)="right();">
      <i class="fa fa-chevron-right"></i>
    </a>

  </div>

然后在您的 .ts 文件中执行一些操作以在 id 之间移动：

  @viewChild() tabset: NgbTabset;

 left() {
    this.tabset.select('the id here');
  }

  right() {
    this.tabset.select('the id here');
  }

您可以变得更复杂，当然可以通过多种方式进行。但是，希望这能让您入门。

您可以在这里找到所有这些信息：https://ng-bootstrap.github.io/#/components/tabs/examples

祝你好运！

Answer 2

应该是：

@ViewChild('tabset') 标签集：NgbTabset；

为 ng-bootstrap tabset 实现手动导航

Implement manual navigation for ng-bootstrap tabset

ng-bootstrap

angular