Реализовать ручную навигацию для вкладки ng-bootstrap

Question

В настоящее время, когда я выбираю вкладку "Клиент", открывается содержимое, а когда я выбираю на вкладке "Прейскурант", открывается содержимое прайс-карты, но при использовании стрелок внизу навигация не работает. Как применить навигацию к стрелкам, чтобы при выборе стрелки она перемещалась в "Клиент", "Прейскурант", "Взрыв"....

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

 <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 файле сделайте что-нибудь для перемещения между идентификаторами:

  @viewChild() tabset: NgbTabset;

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

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

Вы можете сделать более сложным и наверняка сделать это несколькими способами. Но, надеюсь, это поможет вам начать.

Вы можете найти всю эту информацию здесь: https://ng-bootstrap.github.io/

Удачи!

Answer 2

Должно быть:

@ViewChild('tabset') набор вкладок: NgbTabset;