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

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>

当我点击剑道选项卡时，我需要调用函数test()，它在我的ts组件中打印事件：

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

但当我点击剑道选项卡时，没有一个事件被调用。没有这个组件的文档，只有父组件(kendotabstrip(和我需要在kendotabStrip选项卡更改时调用函数。

我也试过：

(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