要确切知道哪个选项卡被选中,可以使用MatTabGroup组件的selectedIndex属性。下面是一个示例代码:
在HTML模板中:
选项卡1内容
选项卡2内容
选项卡3内容
当前选中的选项卡索引:{{ selectedTabIndex }}
在组件中:
import { Component } from '@angular/core';
@Component({
selector: 'app-tabs',
templateUrl: './tabs.component.html',
styleUrls: ['./tabs.component.css']
})
export class TabsComponent {
selectedTabIndex: number = 0;
tabChanged(event: any) {
this.selectedTabIndex = event.index;
}
}
在上面的代码中,我们通过在MatTabGroup的(selectedTabChange)事件中调用tabChanged()方法来更新selectedTabIndex变量。然后,我们可以在模板中使用selectedTabIndex显示当前选中的选项卡索引。
希望这个例子能够帮助你解决问题!