angular - 如何使用选择 EventEmitter Angular 2 TabstripComponent

Question

请让我知道选择事件上 angular 2 选项卡的确切语法。我正在尝试如下内容：

@Component({
  selector: 'my-app',
  template: `
     <kendo-tabstrip>
       <kendo-tabstrip-tab [title]="'Paris'" (select)="onTabSelected()">
            <span class="rainy">&nbsp;</span>
            <div class="weather">
                  <h2>17<span>&ordm;C</span></h2>
                  <p>Rainy weather in Paris.</p>
            </div>
       </kendo-tabstrip-tab>
       <kendo-tabstrip-tab [title]="'New York'" (select)="onTabSelected()">
            <span class="sunny">&nbsp;</span>
            <div class="weather">
                  <h2>29<span>&ordm;C</span></h2>
                  <p>Sunny weather in New York.</p>
            </div>
       </kendo-tabstrip-tab>
     </kendo-tabstrip>
    `
})
class AppComponent {
  public onTabSelected() {
    console.log('index');
  }
}

但这对我不起作用。

Answer 1

TabStripComponent的tabSelect事件对我有用。

在组件模板中：

<kendo-tabstrip (tabSelect)="onTabSelected($event)">
   <kendo-tabstrip-tab [title]="'tab1'" [selected]="true">
        Kendo UI - Tab Strip Demo
   </kendo-tabstrip-tab>
   ....
   ....

在组件类中：

onTabSelected(event: any){
     console.log('Tab Title: ' + event.title);
 }

参考：http ://www.telerik.com/kendo-angular-ui/components/layout/api/TabStripComponent/

Answer 2

选择 EventEmitter是kendo -tabstrip (TabstripComponent)的一部分，而不是 kendo-tabstrip-tab (TabstripTabComponent)

你可以这样使用它-

<kendo-tabstrip (select)="onTabSelected($event)">
   <kendo-tabstrip-tab [title]="'tab1'" [selected]="true">
        Kendo UI - Tab Strip Demo
   </kendo-tabstrip-tab>
   ....
   ....

在组件中，您可以像这样阅读标题-

 onTabSelected(event: any){
     console.log('Tab Title: ' + event.title);
 }

参考：http ://www.telerik.com/kendo-angular-ui/components/layout/api/TabstripComponent/