如何在 angular 和 angular material 标签中获取标签并将其设置为默认值

Question

我在另一个大组件（父组件）中有一个组件。大组件具有选项卡功能，要访问内部组件内的这些选项卡，我将执行以下操作：

document.querySelectorAll('.mat-tab-group');

上面的代码输出了一个长度为 2 的数组，因为还有另一个选项卡。因此，要访问最后一个并设置默认选项卡，我将执行以下操作：

const tabs = document.querySelectorAll('.mat-tab-group');
if (tabs.length > 0) {
    tabs[tabs.length - 1]['selectedIndex'] = 3;
} 

但这没有任何作用。我感谢任何帮助。谢谢。

注意：我不能触摸父组件。只有内层。

Answer 1

看官方文档：https://material.angular.io/components/tabs/overview
这里说有一个名为 "selectedIndex" 的属性决定应该选择哪个选项卡。您不需要 querySelector 或任何 javascript 相关的东西。 这是一个关于如何仅通过 selectedIndex 值动态更改选项卡的示例： https://stackblitz.com/angular/xamqklmnbkkj?file=src%2Fapp%2Ftab-group-dynamic-example.ts
希望对您有所帮助！