Как программно загрузить вкладки в angular 6 начальной загрузки ngb-tabset - PullRequest
Новая
       22

Как программно загрузить вкладки в angular 6 начальной загрузки ngb-tabset

0 голосов
/ 01 ноября 2018

Я хочу загружать вкладки программно, как я хочу, используя угловой 6 машинописный текст. В настоящее время он загружается, когда я нажимаю на вкладки. Я хочу загрузить через код. Вот пример кода, который я пробовал, но он все равно загружается при нажатии вкладки. 

<ngb-tabset #t="ngbTabset" [activeId]="activeIdString" (tabChange)="tabChangeEvent($event)">
  <ngb-tab title="Workforce Plan-Headcount" id="wf1">
    <ng-template ngbTabContent>
      <app-workforce-plan-headcount></app-workforce-plan-headcount>
    </ng-template>
  </ngb-tab>
  <ngb-tab title="Workforce Plan-Cost" id="wf2">
    <ng-template ngbTabContent>
      <app-workforce-plan-cost></app-workforce-plan-cost>
    </ng-template>
  </ngb-tab>
  <ngb-tab title="Current Vacancies" id="wf3">
    <ng-template ngbTabContent>
      <app-current-vacancies></app-current-vacancies>
    </ng-template>
  </ngb-tab>
  <ngb-tab title="Data Entry" id="wf4">
    <ng-template ngbTabContent>
      <app-data-entry></app-data-entry>
    </ng-template>
  </ngb-tab>
</ngb-tabset>

файл TS 

activeIdString: string;
    tabChangeEvent(evt: any) {
            this.activeIdString = "wf3";
            console.log(this.activeIdString); 
          }

Я попробовал этот код загрузить третью третью вкладку при первой загрузке. Тогда он не загружает третью вкладку. Есть ли лучший способ загрузить вкладки программно.

Как получить выбранную вкладку из вкладки начальной загрузки в Angular4?

https://github.com/ng-bootstrap/ng-bootstrap/issues/1682

http://plnkr.co/edit/IjDOUfoenwYdvW136SPY?p=preview

1 Ответ

0 голосов
/ 05 ноября 2018

Это рабочее решение для меня, может быть полезно кому-то еще 

<ngb-tabset #t="ngbTabset" (tabChange)="beforeChange($event)">
  <ngb-tab title="Workforce Plan-Headcount" id="wf1">
    <ng-template ngbTabContent>
      <app-workforce-plan-headcount></app-workforce-plan-headcount>
    </ng-template>
  </ngb-tab>
  <ngb-tab title="Workforce Plan-Cost" id="wf2">
    <ng-template ngbTabContent>
      <app-workforce-plan-cost></app-workforce-plan-cost>
    </ng-template>
  </ngb-tab>
  <ngb-tab title="Current Vacancies" id="wf3">
    <ng-template ngbTabContent>
      <app-current-vacancies></app-current-vacancies>
    </ng-template>
  </ngb-tab>
  <ngb-tab title="Data Entry" id="wf4">
    <ng-template ngbTabContent>
      <app-data-entry></app-data-entry>
    </ng-template>
  </ngb-tab>
</ngb-tabset>

файл component.ts 

public beforeChange($event: NgbTabChangeEvent) {
        if (condition) {
        // prevent from loading
            $event.preventDefault();   
        }
    else{
        this.t.select($event.nextId);
    }
    }
...