angular - Kendo UI Tabstrip Onclick 事件

Question

当单击第二个选项卡中的按钮并且它必须转到第三个选项卡时，我尝试发生 onclick 事件。我在jquery中见过它，但无法在带有 Angular 4/6的TS中实现

import { Component } from '@angular/core';

@Component({
 selector: 'my-app',
 template: `
  <kendo-tabstrip id="tabstrip" kendo-tab-strip="tabstrip">
    <kendo-tabstrip-tab [title]="'Tab 1'">
      <ng-template kendoTabContent>
        <p>Tab 1 Content</p>
      </ng-template>
    </kendo-tabstrip-tab>
    <kendo-tabstrip-tab [title]="'Tab 2'" [selected]="true">
      <ng-template kendoTabContent>
        <p>Tab 2 Content</p>
       <button (click)="openApproachTab()" value="Approach"  class=" btn btn-accent m-btn m-btn--custom m-btn--icon m-btn--pill m-btn--air m-portlet__nav-link m-dropdown__toggle  ">
                            Start your budget</button>
      </ng-template>
    </kendo-tabstrip-tab>
    <kendo-tabstrip-tab [title]="'Tab 3'">
      <ng-template kendoTabContent>
        <p>Tab 3 Content</p>
      </ng-template>
    </kendo-tabstrip-tab>
  </kendo-tabstrip>
`,
styles: [`
    kendo-tabstrip p {
        margin: 0;
        padding: 8px;
    }
`]
})
export class AppComponent {

public openApproachTab()
{
   kendo-tabstrip.select(2);
}

  }

想看看我们需要为 onclick 事件 openApproachTab 编写什么类型的代码

Answer 1

您不需要编写 jQuery 命令式代码来处理选项卡选择。您可以简单地在每个选项卡上使用 [selected] 属性绑定(bind)，并在每个选项卡单击 selectedTab 变量内保持相同的属性。因此，基本上单击 openApproachTab 时，您可以直接将 selectedTab 变量设置为 2(第三个选项卡)

HTML

<kendo-tabstrip (tabSelect)="onTabSelect($event)">
  <kendo-tabstrip-tab [title]="'Tab 1'" [selected]="selectedTab == 0">
    <ng-template kendoTabContent>
      <p>Tab 1 Content</p>
    </ng-template>
  </kendo-tabstrip-tab>
  <kendo-tabstrip-tab [title]="'Tab 2'" [selected]="selectedTab == 1">
    <ng-template kendoTabContent>
      <p>Tab 2 Content</p>
    <button (click)="openApproachTab()" value="Approach"  class=" btn btn-accent m-btn m-btn--custom m-btn--icon m-btn--pill m-btn--air m-portlet__nav-link m-dropdown__toggle  ">
      Start your budget</button>
    </ng-template>
  </kendo-tabstrip-tab>
  <kendo-tabstrip-tab [title]="'Tab 3'" [selected]="selectedTab == 2">
    <ng-template kendoTabContent>
      <p>Tab 3 Content</p>
    </ng-template>
  </kendo-tabstrip-tab>
</kendo-tabstrip>

组件

export class AppComponent {
    selectedTab = 1;
    public onTabSelect(e) {
      this.selectedTab = e.index
    }
    openApproachTab() {
      this.selectedTab = 2
    }
}

Demo Stackblitz