Angular mat-tab 从另一个类返回到第一个选项卡

Question

我正在使用mat-tab-group 创建两个选项卡，然后链接到其他组件：

            <mat-tab-group>
                <mat-tab label="Notifications">
                    <app-notification-rules-container>
                    </app-notification-rules-container>
                </mat-tab>
                <mat-tab label="Create New">
                     <app-notification-account>
                     </app-notification-account>
                </mat-tab>
            </mat-tab-group>

在app-notification-account 组件上，我有一个取消按钮，当单击该按钮时，我想返回到第一个选项卡。如何从不同的组件类导航回第一个选项卡？

Answer 1

在您的子组件中使用@Output。当您想将数据从子组件传输到父组件时，它会有所帮助。 所以让我们在应用通知中说你正在处理一个十字按钮，所以当点击这个按钮时，发出一个事件，该事件将被使用的父级（其中 mat-tab-group）监听，并且在 mat-tab-组，您可以使用 selectedIndex 属性来更改选定的选项卡。

https://angular.io/guide/inputs-outputs

所以in-app-notification-account.ts

...
 constructor() {
   @Output() changeTab = new EventEmitter<();
   // this will emit event , which will be listened by parent
   handleCancel(){
    this.changeTab.emit(true)
  }
}

在您的父组件中，使用 mat 选项卡的位置 在 .html 中

<mat-tab-group [selectedIndex]="selectedIndex">
<mat-tab label="Notifications">
                    <app-notification-account (changeTab)="changeTab()">
                    </app-notification-account>
                </mat-tab>
    </mat-tab-group>

in .component.ts 
.. changeTab() {
   this.selectedIndex = this.selectedIndex === 1 ?0:1
  // or if you always want to go to first tab just set selectedIndex = 0
}