当有多个 MatTabGroup 时处理选项卡更改

Question

为了能够 enable/disable 一些电子邮件模板，我将我的 select 标签分成了不同的组。

请参阅 stackblitz：https://stackblitz.com/edit/angular-ddysaa

最初，所有选项卡都设置为索引 0。如果我先转到 组 1 中的索引 3，然后 组 2 中的索引 2[=28] =]，然后返回组 1 中的 index 3，selectedTabChange 处理程序未被触发。

原因是，当我返回组 1 并再次访问索引 3 时，这当然不会被读取为 tabChange。

我试图通过在每次组更改时将每个组的 selectedIndex 重置为 0 来解决这个问题，但这不起作用。我不明白为什么这不起作用。

这是执行此操作的正确解决方法吗？如果是这样 - 我错过了什么？有没有其他方法来处理模板组以获得相同的行为？

Answer 1

首先你需要(slectedIndexChange)和(click)在<mat-tab-group>。在这里更改第一个 mat-tab-group.. 像这样..

<mat-tab-group [ngClass]="activeGroup != 0 ? 'mat-no-ink-bar': ''"
        (selectedTabChange)="group_1_tabChanged($event)"
        (selectedIndexChange)="group_1_tabChanged($event)" 
        [selectedIndex]="selectedGroup_1_Tab.value" 
        (click)="alert($event)">
        <mat-tab *ngFor="let tab of group_1_TemplateList"  [label]=(tab)>
        </mat-tab>
</mat-tab-group>

您的点击事件是...

alert(value){
   this.templateInfo = `re Click of Group1 index is : ${this.activeGroup}`
}

通过这种方式，您可以获得点击的所选标签的索引。通过数组索引，您可以获得该选项卡的名称。

Answer 2

使用（点击）而不是（selectedTabChange）它应该能达到您的目的

 <mat-card class="email-template-card">
        <mat-card-content class="email-template-card-content">
            <!-- Standard email templates -->
            <mat-tab-group [ngClass]="activeGroup != 0 ? 'mat-no-ink-bar': ''"
                (click)="group_1_tabChanged($event,selectedGroup_1_Tab.value)" [selectedIndex]="selectedGroup_1_Tab.value">
                <mat-tab *ngFor="let tab of group_1_TemplateList" [label]=(tab)>
                </mat-tab>
            </mat-tab-group>

            <!-- PDMR email templates -->
            <mat-tab-group [ngClass]="activeGroup != 1 ? 'mat-no-ink-bar': ''" (click)="group_2_tabChanged($event,selectedGroup_2_Tab.value)" 
                [selectedIndex]="selectedGroup_2_Tab.value" *ngIf="group_2_TemplateList.length > 0">
                <mat-tab *ngFor="let tab2 of group_2_TemplateList" [label]=(tab2)>
                </mat-tab>
            </mat-tab-group>

            <!-- Sensitive email templates -->
            <mat-tab-group [ngClass]="activeGroup != 3 ? 'mat-no-ink-bar': ''"
            (click)="group_3_tabChanged($event,selectedGroup_3_Tab.value)" [selectedIndex]="selectedGroup_3_Tab.value"
                *ngIf="group_3_TemplateList.length > 0">
                <mat-tab *ngFor="let tab4 of group_3_TemplateList" [label]=(tab4)>
                </mat-tab>
            </mat-tab-group>
            <!-- <div class="ngx-editor">
                    <ckeditor class="ngx-editor" height="500px" resizer="none" [config]="ckConfig"
                        [(ngModel)]="templateInfo.content" [spellcheck]="true"></ckeditor>
                </div>-->

                <h1>{{templateInfo}}</h1>
        </mat-card-content>
    </mat-card>

当有多个 MatTabGroup 时处理选项卡更改

Handle tab change on when having multiple MatTabGroup

angular

angular-material-6