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（第三个标签）

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

Kendo UI Tabstrip Onclick事件

1 个答案: