如何在 <kendo-tabstrip-tab> 组件的点击事件中调用一个函数？

Question

我有这个 kendo-tabstrip-tab:

<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-tabstrip-tab 时，我需要调用函数 test() 在我的 ts 组件中打印事件：

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

但是当我点击 kendo-tabstrip-tab 时，没有任何事件被调用。没有此组件的文档，只有父组件 (kendo-tabstrip)，我需要在 kendo-tabstrip-tab 更改时调用函数。

我也试过：

(click)="test()"

但是当我点击时它没有调用函数...

Answer 1

如您所见，TabStripTabComponent 上没有定义 @Output。

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

<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

如何在 <kendo-tabstrip-tab> 组件的点击事件中调用一个函数？

How i can call one function in click event of the <kendo-tabstrip-tab> component?

kendo-ui

angular