使用 Tab 键将焦点设置在有角度的材质上

Question

我是 Angular-Material 的新手。当使用 tab 键将焦点放在一个材料选项卡中的按钮（添加完成）到另一个角度材料选项卡时，如何将焦点设置在 Angular 材料选项卡上。

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 的标签的索引

我创建了一个stackblitz 以便更好地理解