Angular Material 2无法设置默认激活标签页问题求助

我来帮你搞定这个默认激活标签页的问题！你的代码目前依赖routerLinkActive来判断标签是否激活，但初始页面加载时如果没有匹配的路由，就不会有默认激活的标签。这里有两种简单有效的解决方式：

方法1：组件初始化时主动导航到第一个标签的路由 #

这种方式直接在组件加载时，通过Angular Router跳转到第一个标签对应的路径，这样routerLinkActive就能匹配到并激活该标签。

首先补全你的navLinks定义，然后导入Router并在ngOnInit里添加导航逻辑：

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router'; // 导入Router

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  // 补全navLinks示例（可根据你的实际路由调整）
  navLinks = [
    { label: '首页', path: '/home' },
    { label: '详情', path: '/detail' },
    { label: '设置', path: '/settings' }
  ];

  constructor(private router: Router) {} // 注入Router

  ngOnInit(): void {
    // 初始化时导航到第一个标签的路径
    this.router.navigate([this.navLinks[0].path]);
  }
}

方法2：在路由配置中添加重定向 #

如果不想在组件里写导航逻辑，可以直接在路由模块中设置根路径重定向到第一个标签的路由，页面加载时会自动跳转到目标路径，标签也会随之激活。

比如你的路由配置文件（通常是app-routing.module.ts）：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { DetailComponent } from './detail/detail.component';
import { SettingsComponent } from './settings/settings.component';

const routes: Routes = [
  // 根路径重定向到第一个标签对应的路由
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'detail', component: DetailComponent },
  { path: 'settings', component: SettingsComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

原代码无默认激活的原因 #

你的原代码中，[active]="rla.isActive"只有当路由与routerLink完全匹配时才会返回true。但页面初始加载时，路由是根路径（/），没有任何一个navLinks的path能匹配这个路径，所以没有标签会被激活。上面两种方法都是让初始路由匹配到第一个标签的路径，从而触发routerLinkActive的激活状态。

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