如何使用 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
希望能幫助到你！