Событие Kendo UI Tabstrip Onclick - PullRequest
Новая
       19

Событие Kendo UI Tabstrip Onclick

0 голосов
/ 09 ноября 2018

Я пытаюсь вызвать событие onclick, когда нажата кнопка на второй вкладке, и она должна перейти на третью вкладку. Я видел это в jquery, но не смог реализовать в TS с угловым 4/6 

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

1 Ответ

0 голосов
/ 09 ноября 2018

Вам не нужно писать императивный код jQuery для обработки выбора вкладок. Вы можете просто использовать привязку свойства [selected] на каждой вкладке и поддерживать то же самое на каждой вкладке, щелкая внутри переменной selectedTab. Таким образом, по щелчку openApproachTab вы можете напрямую установить selectedTab переменную на 2 (3-я вкладка)

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

Демо Stackblitz

...