angular - ngb-tab 动态启用后选择标签

Question

我有 2 个选项卡。最后一个在初始化时被禁用。单击位于第一个选项卡中的自定​​义按钮后，最后一个选项卡应启用并选择它。

但现在它启用了选项卡但没有选择。

我只是尝试更改样式，因为它似乎已被禁用，但在 ngb-tab 上使用 [ngStyle] 或 [class] 似乎不起作用。我还尝试通过 ngDoCheck 导航(使用选择)。

模板:

<ngb-tabset #tabSet="ngbTabset" [justify]="'justified'" (tabChange)="tabChange($event)">
    <ngb-tab id="tab-1" title="Step 1">
      <ng-template ngbTabContent>
        First
      </ng-template>
    </ngb-tab>
    <ngb-tab id="tab-2" title="Step 2" [disabled]="disableEnd">
        <ng-template ngbTabContent>
            Conclusion
        </ng-template>
    </ngb-tab>
</ngb-tabset>

<button (click)="goToEnd()" *ngIf="actualPage === 1">Send</button>

.ts:

@ViewChild('tabSet', {static: false}) tabSet;
pages: string[] = ["tab-1", "tab-2"];
disableEnd:boolean = true;

  goToEnd () : void {
    this.disableEnd = false;
    this.tabSet.select(this.pages[1]);
  }

我希望选项卡被激活并被选中，以供查看。

Answer 1

在 goToEnd(tabSet) 中传递模板引用

像这样尝试:

模板:

<button (click)="goToEnd(tabSet)" *ngIf="actualPage === 1">Send</button>

typescript :

 goToEnd(tabSet): void {
    this.disableEnd = false;
    var that = this
    setTimeout(function () {
      tabSet.select(that.pages[1]);
    }, 1);
  }

Working Demo