如何从子组件切换材质选项卡答案

【问题标题】：How to switch material tab from child component如何从子组件切换材质选项卡
【发布时间】：2020-06-30 13:49:34
【问题描述】：

我想根据子组件中的按钮单击来切换选项卡。我该怎么做呢

parent component

<mat-tab-group #mytab>
    <mat-tab label="First">
        Content 1
        <br>
        <br>
        <br>
        <button (click)="next()">Next</button>

    </mat-tab>
    <mat-tab label="Second">
        <app-tab-child></app-tab-child>
    </mat-tab>
    <mat-tab label="Third"> Content 3 </mat-tab>
</mat-tab-group>

export class TabGroupBasicExample {
  @ViewChild("mytab", { static: true }) tab: any;

  next() {
    this.tab.selectedIndex = 1;
  }
}

Child Component

<p>
    tab-child !
</p>

<br>
<br>
<br>
<button (click)="next()">Next</button>

Stackblitz demo

如何根据子组件中的下一个按钮单击来切换选项卡？

【问题讨论】：

标签： angular angular-material

【解决方案1】：

一种方法是使用@Output 模式，子组件发出的事件通过使用Angular的事件绑定在父模板中接收（就像您在监听点击事件时一样），如下所示：

在子组件中：

@Output() next = new EventEmitter<void>();

在孩子的模板中：

<button (click)="next.emit()">Next</button>

在父母的模板中：

<mat-tab label="Second">
    <app-tab-child (next)="next()"></app-tab-child>
</mat-tab>

【讨论】：