如何使用 angular 材料标签在 angular 中获取标签并将其设置为默认值

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
希望能帮助到你！