Question

目前，当我选择＆＃34;客户＆＃34;选项卡内容将打开，当我选择＆＃34;评分卡＆＃34;选项卡将打开价目表的内容，但当我使用底部的箭头时导航不起作用。如何将导航应用于箭头，以便当我选择箭头时，它会移动到＆＃34;客户端＆＃34; ，＆＃34;评分卡＆＃34;，＆＃34; Burst＆＃34; ....

<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的手动导航

2 个答案: