Kendo UI Tab剥Onclick事件

Question

当第二个选项卡中的一个按钮被点击，并且它必须转到第三个选项卡时，我正在尝试有一个onclick事件。我在jquery中见过，但在有角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]属性绑定，并在每个选项卡上单击selectedTab变量保持相同的属性绑定。因此，基本上只要单击openApproachTab，就可以直接将selectedTab变量设置为2(第三个选项卡)。

<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