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>组件的click事件中调用一个函数？

2 个答案: