html - 如何以角度获取 mdb-tabset 中的活动选项卡？

Question

我有一个 mdb-tabset，它有两个 mdb-tabs，标题为“Frist Tab”和“Second Tab”。现在我想知道哪个是活动的并获取它的名称或 id 以便在组件中访问它。我有这个selectedTab: string = ''; 在我的组件中。我想获取活动的 selectedTab 并将其传递给组件中的函数。我怎样才能修改我的html来实现呢？

<mdb-tabset  [buttonClass]="'classic-tabs'" [contentClass]="'card'" class="classic-tabs">
    <mdb-tab heading="FIRST TAB">
        <div class="row">
            <div class="col-12">
                <table mdbTable mdbTableScroll scrollY="true" class="table table-hover" hover="true">
                    <!-- bordered="true"> -->
                    <thead>
                        <tr>
                            <th class="sticky-top" bordered="false" *ngFor="let head of Columns; let i = index"
                                scope="col">{{head}}
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let el of data; let i = index" maxHeight="10">
                            <td><a target="_blank" href={{el.url}}>{{el.id}}</a></td>
                            <td [innerHTML]="el.name"></td>
                            <td [innerHTML]="el.role"></td>
                            <td class="no-padding"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </mdb-tab>
    
    <mdb-tab heading="SECOND TAB">
        <div class="row">
            <div class="col-12">
                <table mdbTable mdbTableScroll scrollY="true" class="table table-hover" hover="true">
                    <!-- bordered="true"> -->
                    <thead>
                        <tr>
                            <th class="sticky-top" bordered="false" *ngFor="let head of Columns; let i = index"
                                scope="col">{{head}}
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let el of dataSource; let i = index" maxHeight="10">
                            <td><a target="_blank" href={{el.url}}>{{el.id}}</a></td>
                            <td [innerHTML]="el.name"></td>
                            <td [innerHTML]="el.role"></td>
                            <td class="no-padding"></td>
                        </tr>
                    </tbody>
                </table>                
            </div>
        </div>
    </mdb-tab>
</mdb-tabset >

标签： htmlangularmdbootstrap