javascript - 获取 tabView PrimeNG 的当前标题

Question

我想获取 PrimeNG tabView 的当前 header 。我尝试通过绑定(bind) activeIndex 属性来做到这一点，但没有成功。

Answer 1

您可以使用@ViewChild 在您的组件中获取对您的 tabView 的引用并绑定(bind)到一个变量 selectedIndex 然后您可以获得所选 tavview 的标题 this.tabView.tabs[this.selectedIndex].header.

下面是示例代码:应用程序组件.ts

import { Component, ViewChild } from '@angular/core';
//imports
import {TabView, TabPanel} from 'primeng/primeng';

@Component({
  selector: 'my-app',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  selectedIndex = 0;
  //class variable
  @ViewChild(TabView) tabView: TabView;

  onChange($event) {
    this.selectedIndex = $event.index;
  }

  getSelectedHeader(){
    console.log(this.tabView.tabs[this.selectedIndex].header);
  }
}

app.component.html

<h2>PrimeNG Issue Template</h2>
<button pButton (click)="getSelectedHeader()" label="selected header"></button>
<p-tabView (onChange)="onChange($event)" [activeIndex]="selectedIndex">
  <p-tabPanel header="first" [selected]="true">
    <first></first>

  </p-tabPanel>
  <p-tabPanel header="second" cache="false">
    <ng-template pTemplate="content">
      <second></second>
    </ng-template>
  </p-tabPanel>
</p-tabView>

A working plunker