剑道UI选项卡点击事件

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
}
}

演示堆栈闪电