mat-tab-group的selectedTabChange初始加载不触发if如何解决

selectedTabChange 是标签选中项变更事件，仅在选中标签发生主动切换动作（用户点击切换、代码调用方法切换）时才会触发。Angular Material 组件初始渲染时设置默认激活第一个标签的过程，不属于「变更触发」范畴，因此初始化阶段不会执行绑定的回调函数，只有后续手动切标签才会触发事件。

方案1：初始化阶段主动调用对应逻辑（最推荐） #

把标签加载逻辑抽成公共方法，在组件初始化生命周期里主动传入默认索引0调用，同时保留事件触发的调用逻辑，避免重复代码。

1. 模板代码不需要改动，保持原有绑定即可：

<mat-tab-group   mat-align-tabs="start"   (selectedTabChange)="onScrollDown($event)">
  <!-- 标签内容省略 -->
</mat-tab-group>

2. 组件类代码调整如下，顺便修复原代码的逻辑bug：

import { Component, OnInit } from '@angular/core';
// 其余导入、装饰器代码省略

export class TabComponent implements OnInit {
  beu: any[] = [];
  tools: any[] = [];
  // 给i设置初始值，避免undefined导致slice方法报错
  i = 15;

  ngOnInit(): void {
    // 初始化时主动加载第一个标签的内容，传入默认索引0
    this.loadTabData(0);
  }

  onScrollDown(evt: any) {
    this.loadTabData(evt.index);
  }

  private loadTabData(activeIndex: number) {
    setTimeout(() => {
      this.api.getApi().subscribe(({tool, beuty}) => {
        // 修复原代码重复累加i的bug：原代码两次写this.i+=15，会导致单次加载步长变成30
        this.beu = beuty.slice(0, this.i);
        this.tools = tool.slice(0, this.i);
        // 累加操作只执行一次
        this.i += 15;
      })

      if (activeIndex === 0) {
        console.log('ddd');
      }
    }, 1000);
  }
}

方案2：通过selectedIndex双向绑定监听 #

如果你使用的是较新版本的Angular Material，可以改用selectedIndex的双向绑定，初始值设置为0后，初始化阶段也能捕获到选中状态：

1. 模板调整：

<mat-tab-group 
  mat-align-tabs="start"
  [(selectedIndex)]="activeTabIndex"
  (selectedIndexChange)="onScrollDown($event)"
>
  <!-- 标签内容省略 -->
</mat-tab-group>

2. 组件内新增属性声明activeTabIndex = 0即可，原有回调逻辑不需要大改，注意如果出现变更检测报错，把初始化调用逻辑挪到ngAfterViewInit生命周期中执行。

• 原代码中硬写1s setTimeout模拟延迟的方式并不稳妥，如果是为了等待视图渲染完成或者接口返回，建议优先用Angular内置生命周期、接口订阅回调来控制执行时机。
• 如果需要在初始加载时拿到默认激活的tab实例，可以通过@ViewChild(MatTabGroup)获取tab组实例，在ngAfterViewInit中读取selectedIndex属性即可。

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