要确切知道哪个选项卡被选中,可以使用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
显示当前选中的选项卡索引。
希望这个例子能够帮助你解决问题!