Angular Material Tab的selectedTabChange事件为何在组件加载时触发？如何阻止？

这是预期行为吗？ #

是的，这是mat-tab-group的预期行为。组件初始化时会默认选中第一个标签页，因此会自动触发一次selectedTabChange事件，这是组件初始化流程的一部分。

如何阻止初始化时触发事件执行业务逻辑？ #

最直接的方式是通过标志位过滤初始化时的触发，具体步骤如下：

1. 在组件类中添加一个初始化状态标志，初始值设为false
2. 在ngAfterViewInit生命周期钩子中，将标志位设为true（确保组件视图初始化完成）
3. 在selectedTabChange方法中，仅当标志位为true时才执行你的业务逻辑

修改后的组件代码示例： #

component.ts

import { Component, AfterViewInit } from '@angular/core';

export class exampleTabsComponent implements AfterViewInit {
  isInitialized = false;
  tabSelectedValue: string = '';
  tabsIndex: number = 0;
  tabs = ['标签1', '标签2', '标签3']; // 示例标签数据

  ngAfterViewInit(): void {
    // 视图初始化完成后，标记为已初始化
    this.isInitialized = true;
  }

  selectedTabChange(data: any) {
    // 过滤初始化时的触发
    if (!this.isInitialized) return;

    const tabEvent = data.tab;
    this.tabSelectedValue = tabEvent.textLabel;
    this.addDynamicComponent(tabEvent.textLabel);
    this.tabsIndex = data.index;
  }

  addDynamicComponent(label: string) {
    // 你的动态组件加载逻辑
  }
}

component.html（保持原代码即可）

<div class="tab-group-container">
    <!-- Tabs section -->
    <mat-tab-group (selectedTabChange)="selectedTabChange($event)" preserveContent #tabGroup>
        <mat-tab *ngFor="let tab of tabs; let index = index" label="{{tab}}">
            <ng-template mat-tab-label>
                {{tab}}
            </ng-template>
        </mat-tab>
    </mat-tab-group>
   <ng-template #tabContent></ng-template>
</div>

补充说明 #

• ngAfterViewInit是Angular的生命周期钩子，会在组件及其子视图初始化完成后调用，此时设置标志位可以确保过滤掉组件初始化时的第一次事件触发。
• 若需要在初始化时主动加载第一个标签的内容，可在ngAfterViewInit中手动调用selectedTabChange，传入初始选中标签的对应数据。

内容的提问来源于stack exchange，提问作者jayaguruSurya