将lntds-tabs转为Bootstrap nav tabs后，无法处理切换事件及选中索引求助

已将自定义lntds-tabs/lntds-tab组件替换为Bootstrap Nav Tabs结构，但无法实现原组件的tab切换事件处理及selectedIndex选中索引功能，且不能修改.ts文件，需提供解决方案。

原有自定义Tabs逻辑 #

<!-- <lntds-tabs [selectedIndex]="selectedTabIndex" (selectedTabChange)="tabChanged($event)"> -->
<!-- <lntds-tab class="custom-tab-group lntdstabscontainer ml-4 text-center-sm" tabTitle="Archival"> -->

改写后的Bootstrap Nav Tabs逻辑 #

<ul class="nav nav-tabs justify-content-left custom-tab ">
    <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#archivalTab">Archival</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#retrievalTab">Retrieval</a>
    </li>
</ul>
<div class="tab-content">
    <div id="archivalTab" class="tab-pane active">
        <!-- Archival标签页内容 -->
    </div>
    <div id="retrievalTab" class="tab-pane">
        <!-- Retrieval标签页内容 -->
    </div>
</div>

通过原生JavaScript结合Bootstrap Tab的内置事件，无需修改.ts文件即可模拟原组件功能：

1. 模拟selectedIndex状态维护 #

添加隐藏元素存储当前选中索引，替代原组件的selectedIndex绑定：

<!-- 初始值为0，对应第一个标签 -->
<input type="hidden" id="selectedTabIndex" value="0">

2. 绑定切换事件，触发原tabChanged方法 #

利用Bootstrap的shown.bs.tab事件（标签切换完成后触发），获取选中索引并调用原组件的事件处理方法：

<script>
    // 监听所有tab切换事件
    document.querySelectorAll('a[data-toggle="tab"]').forEach(tab => {
        tab.addEventListener('shown.bs.tab', function (e) {
            // 获取当前选中标签的索引
            const allTabs = Array.from(document.querySelectorAll('.nav-link'));
            const currentIndex = allTabs.indexOf(e.target);
            
            // 更新隐藏元素的索引值
            document.getElementById('selectedTabIndex').value = currentIndex;
            
            // 调用原组件的tabChanged方法，传递索引参数
            if (typeof tabChanged === 'function') {
                tabChanged(currentIndex);
            }
        });
    });
</script>

3. 初始化同步选中状态（可选） #

若页面加载时需根据原selectedTabIndex值设置默认选中标签，添加初始化逻辑：

<script>
    document.addEventListener('DOMContentLoaded', function() {
        const initialIndex = parseInt(document.getElementById('selectedTabIndex').value) || 0;
        const targetTab = document.querySelectorAll('.nav-link')[initialIndex];
        if (targetTab) {
            targetTab.click();
        }
    });
</script>

完整整合代码 #

<input type="hidden" id="selectedTabIndex" value="0">

<ul class="nav nav-tabs justify-content-left custom-tab ">
    <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#archivalTab">Archival</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#retrievalTab">Retrieval</a>
    </li>
</ul>
<div class="tab-content">
    <div id="archivalTab" class="tab-pane active">
        <!-- Archival标签页内容 -->
    </div>
    <div id="retrievalTab" class="tab-pane">
        <!-- Retrieval标签页内容 -->
    </div>
</div>

<script>
    // 初始化选中状态
    document.addEventListener('DOMContentLoaded', function() {
        const initialIndex = parseInt(document.getElementById('selectedTabIndex').value) || 0;
        const targetTab = document.querySelectorAll('.nav-link')[initialIndex];
        if (targetTab) {
            targetTab.click();
        }
    });

    // 监听切换事件并触发原方法
    document.querySelectorAll('a[data-toggle="tab"]').forEach(tab => {
        tab.addEventListener('shown.bs.tab', function (e) {
            const allTabs = Array.from(document.querySelectorAll('.nav-link'));
            const currentIndex = allTabs.indexOf(e.target);
            document.getElementById('selectedTabIndex').value = currentIndex;
            if (typeof tabChanged === 'function') {
                tabChanged(currentIndex);
            }
        });
    });
</script>

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