Angular mat-tab 从另一个 class 回到第一个标签

Question

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

            <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 组件上我有一个取消按钮，单击该按钮后我想返回到第一个选项卡。如何从不同的组件导航回第一个选项卡 class?

Answer 1

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

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

所以应用内通知-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
}

Angular mat-tab 从另一个 class 回到第一个标签

Angular mat-tab go back to first tab from another class

angular

angular-material

mat-tab