Angular Material Tabs如何实现页面加载后默认显示第一个标签页

问题原因 #

你当前的默认值设置和激活判断逻辑不匹配：
TS文件中给activeLink设置的初始值为数字0，但模板中[active]绑定的判断条件为activeLink == link，其中link是links数组遍历出来的元素，通常为字符串类型的标签名称，初始值0无法和第一个标签的link值匹配，因此无法触发默认激活状态。

解决方法 #

直接将activeLink的初始值设置为links数组的第一个元素即可，分两种场景处理：

场景1：links数组为本地静态定义 #

直接修改TS文件中的初始赋值逻辑：

// 示例静态links数组
public links: string[] = ['首页', '数据', '设置'];
// 初始值直接取数组第一个元素，不要赋值为0
public activeLink = this.links?.length ? this.links[0] : '';

场景2：links数组为异步接口获取 #

在接口返回数据赋值links后，再给activeLink赋值：

import { OnInit } from '@angular/core';

export class TabsComponent implements OnInit {
  public links: string[] = [];
  public activeLink = '';

  constructor(private yourService: YourService) {}

  ngOnInit() {
    this.yourService.getTabList().subscribe(res => {
      this.links = res;
      // 数据获取完成后赋值默认激活项
      this.activeLink = this.links?.length ? this.links[0] : '';
    })
  }
}

修改完成后页面加载时第一个标签的激活判断会自动命中，无需手动点击即可显示激活状态。

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