使用 Tab 鍵將焦點設置在有角度的材質 Tab 上

Question

我是 Angular-Material 的新手。 當使用 Tab 鍵將焦點放在一個材料選項卡中的按鈕（添加完成）到另一個角度材料選項卡上時，如何將焦點設置在 Angular-Material 選項卡上。

AppResource.Component.html

<button mat-button>
Add accomplishment
<button> 

ResourceDetail.component.html

<mat-tab-group
    <mat-tab label ="engagment">
            <app-resource-view> <app-resource-view>
     </mat-tab>
    <mat-tab label="Skill" >
    </mat-tab>
</mat-tab-group>

Answer 1

按照您的解釋，我知道當您單擊子組件中的按鈕時，您需要更改父組件的選項卡。

為此，您可以使用一項服務來收聽主題。

這樣你就可以從你的子組件說一些東西，然后在你的父組件上獲取值。

為您服務

listener: Subject<boolean> = new Subject;

這是允許您在兩個組件之間聊天的主題

在您的子組件上，當您單擊按鈕時，您需要對您的主題說您想要做某事。 例如， Subject由boolean但您可以由string ， number或任何你想要的組成。

chat(){
  this.resourceService.listener.next(true)
}

然后在您的父組件上，您可以檢查主題是否已更改並在更改后執行某些操作。

selected: number = 0

ngOnInit(){
  this.resourceService.listener.subscribe((val) => {
    if (val){
      this.selected = 1
    }
  })
}

這里， selected是mat-tab-group的選項卡的索引

我創建了一個堆棧閃電戰以更好地理解