如何在<kendo选项卡选项卡>组件的单击事件中调用一个函数？

Question

我有个剑道标签：

<kendo-tabstrip tabPosition="left">
    <kendo-tabstrip-tab (change)="test()" [title]="'Geral'" [selected]="true">
        <ng-template kendoTabContent>
              test
        </ng-template>
    </kendo-tabstrip-tab>
</kendo-tabstrip>

当我在kendo选项卡中单击时，我需要调用函数test()，该函数在ts组件中打印事件：

  test(event){
    console.log('i don't receive this console...')
  }

但是当我在kendo选项卡中单击时，没有一个事件被调用。不要有这个组件的文档，只有父组件(kendo选项卡)，当kendo选项卡被更改时，我需要调用函数。

我也试过：

(click)="test()"

但我点击的时候它没有调用这个函数..。

Answer 1

在@Output上没有定义TabStripTabComponent，因为您可以阅读。

您应该在tabSelect上使用TabStripComponent事件，这将触发一个包含所选选项卡的索引号的事件。

<kendo-tabstrip tabPosition="left" (tabSelect)="onSelectTab($event)">
  <kendo-tabstrip-tab (change)="test()" [title]="'Geral'" [selected]="true">
    <ng-template kendoTabContent>
      test
    </ng-template>
  </kendo-tabstrip-tab>
</kendo-tabstrip>

Answer 2

https://www.telerik.com/kendo-angular-ui/components/layout/api/TabStripComponent/ tabSelect执行您需要做的事情，它包含选项卡的index值。

<kendo-tabstrip (tabSelect)="onTabSelect($event)">
    ...
</kendo-tabstrip>

其中onTabSelect($event)

public onTabSelect(e) {
    console.log(e);
}

https://stackblitz.com/edit/angular-c8o5ff?file=app/app.component.ts