PrimeNG从17迁移至18：Tabs组件缺失onClick/onChange事件咨询

PrimeNG 18的Tabs组件确实移除了旧版的onClick/onChange事件，但可以通过以下几种方式实现相同的交互检测需求：

• 通过activeIndex双向绑定监听切换
  在模板中将Tabs的activeIndex与组件属性双向绑定，然后用ngOnChanges钩子监听值的变化，就能捕获标签页切换事件：

  <p-tabs [(activeIndex)]="selectedTabIndex">
    <p-tabPanel header="Tab 1">内容1</p-tabPanel>
    <p-tabPanel header="Tab 2">内容2</p-tabPanel>
  </p-tabs>
  

  import { Component, OnChanges, SimpleChanges } from '@angular/core';
  
  @Component({...})
  export class MyComponent implements OnChanges {
    selectedTabIndex = 0;
  
    ngOnChanges(changes: SimpleChanges): void {
      if (changes['selectedTabIndex'] && !changes['selectedTabIndex'].firstChange) {
        // 处理标签页切换逻辑，比如记录当前选中索引、触发相关动作
        console.log('切换到标签页:', changes['selectedTabIndex'].currentValue);
      }
    }
  }
  

• 给单个TabPanel绑定click事件
  如果需要检测用户点击标签页头部的动作（不管是否切换），可以直接给每个p-tabPanel绑定(click)事件，结合当前激活状态判断：

  <p-tabs [(activeIndex)]="selectedTabIndex">
    <p-tabPanel header="Tab 1" (click)="onTabClick(0)">内容1</p-tabPanel>
    <p-tabPanel header="Tab 2" (click)="onTabClick(1)">内容2</p-tabPanel>
  </p-tabs>
  

  export class MyComponent {
    selectedTabIndex = 0;
  
    onTabClick(tabIndex: number): void {
      if (tabIndex === this.selectedTabIndex) {
        // 用户点击了已激活的标签页
        console.log('点击了已选中的标签页:', tabIndex);
      } else {
        // 用户触发了标签页切换
        console.log('点击未选中标签页，即将切换到:', tabIndex);
      }
    }
  }
  

• 利用ViewChild获取Tabs实例监听内部事件
  PrimeNG的Tabs组件内部会在切换时触发activeTabChange事件，可以通过@ViewChild获取组件实例来监听：

  <p-tabs #myTabs>
    <p-tabPanel header="Tab 1">内容1</p-tabPanel>
    <p-tabPanel header="Tab 2">内容2</p-tabPanel>
  </p-tabs>
  

  import { Component, ViewChild, AfterViewInit } from '@angular/core';
  import { Tabs } from 'primeng/tabs';
  
  @Component({...})
  export class MyComponent implements AfterViewInit {
    @ViewChild('myTabs') tabs!: Tabs;
  
    ngAfterViewInit(): void {
      this.tabs.activeTabChange.subscribe((activeTab) => {
        // 获取切换后的标签页实例，可访问header、index等属性
        console.log('切换到标签页:', activeTab.header, activeTab.index);
      });
    }
  }
  

这些方案都能覆盖旧版onClick/onChange的需求，根据你的具体场景选最合适的就行。

内容的提问来源于stack exchange，提问作者Luis Oliveira