升级至Angular 11后<tabset>下的(select)事件无法触发

问题根源 #

你使用的ngx-bootstrap 5.x版本中，tab组件的选择事件名称已变更，旧的(select)事件不再被支持，取而代之的是(tabSelect)事件。Angular升级到11后，对应的ngx-bootstrap版本（5.2.0）已调整事件命名规则，导致原绑定的事件无法触发。

解决步骤 #

将模板中所有tab标签的(select)事件替换为(tabSelect)即可恢复功能：

修改后的admin.component.html代码：

<div class="container-fluid">
  <div class="row p-3">
    <div class="col-md-12"><h3>Admin</h3></div>
  </div>

  <div>
    <tabset class="secondary_tabs col-md-12">
      <tab heading="User Access Data Files" (tabSelect)="loadUserAccessData()">
        <app-userAccessData></app-userAccessData>
      </tab>
      <tab heading="Approval Data Files" (tabSelect)="loadApprovalData()">
        <app-approvalData></app-approvalData>
      </tab>
      <tab heading="Archival / Purge Reports" (tabSelect)="loadArchivalData()">
        <app-archivalReports></app-archivalReports>
      </tab>
      <tab heading="Operational Metrics" (tabSelect)="loadOperationalMetricsData()">
        <app-operationalMetrics></app-operationalMetrics>
      </tab>
      <!-- <tab heading="Pending Approval Data" (tabSelect)="loadPendingApprovalsData()">
        <app-pendingApprovalData></app-pendingApprovalData>
      </tab> -->
    </tabset>
  </div>
</div>

额外排查点 #

1. 版本兼容性：你当前使用的ngx-bootstrap 5.2.0与Angular 11完全兼容，无需调整版本。
2. 子组件实例检查：代码中@ViewChild使用static: true，确保在ngOnInit阶段能正确获取子组件实例，若后续涉及异步加载场景，可根据需求调整为static: false。
3. 方法有效性：确认子组件中的getApprovalDataJSON()等方法已正确定义且为公共可访问状态。

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