Angular Material标签页路由加载时默认未显示首个标签内容问题

看起来你正在实现一个Angular应用里的标签栏按需加载功能——初始进入/will-kit路由只显示标签容器，点击标签才加载对应内容并更新URL。结合你的路由片段，我来给你梳理完整的实现方案和关键细节：

完整路由配置代码 #

首先完善你给出的路由片段，适配按需加载的需求：

import { Routes } from '@angular/router';
import { WillKitLayoutComponent } from './will-kit-layout.component';
import { StartComponent } from './start/start.component';
import { EmptyComponent } from './empty/empty.component'; // 自定义空组件，用于初始占位

const routes: Routes = [
  {
    path: 'will-kit',
    component: WillKitLayoutComponent, // 负责渲染标签栏（TABS）的父组件
    children: [
      // 初始进入/will-kit时，仅显示标签栏，内容区域用空组件占位
      { path: '', component: EmptyComponent },
      // 对应"start"标签的路由，指定辅助路由出口
      { 
        path: 'start', 
        component: StartComponent,
        outlet: 'taboutlet' 
      },
      // 可扩展更多标签路由
      { 
        path: 'settings', 
        component: SettingsComponent,
        outlet: 'taboutlet'
      }
    ]
  }
];

export const WillKitRoutes = routes;

关键实现细节 #

1. 辅助路由出口的定义 #

你URL中的/(taboutlet:./start)是Angular的辅助路由语法，taboutlet是自定义的辅助路由出口名称。需要在WillKitLayoutComponent的模板中添加这个出口，用来渲染标签内容：

<!-- WillKitLayoutComponent 模板代码 -->
<mat-tab-group (selectedTabChange)="onTabChange($event)">
  <mat-tab label="Start">
    <!-- 辅助路由出口，名称必须和路由配置中的outlet一致 -->
    <router-outlet name="taboutlet"></router-outlet>
  </mat-tab>
  <mat-tab label="Settings">
    <router-outlet name="taboutlet"></router-outlet>
  </mat-tab>
</mat-tab-group>

2. 标签点击的路由导航逻辑 #

在WillKitLayoutComponent中处理标签点击事件，通过Angular的Router服务导航到对应的辅助路由，同时更新URL：

import { Component } from '@angular/core';
import { Router, MatTabChangeEvent } from '@angular/material/tabs';

@Component({
  selector: 'app-will-kit-layout',
  templateUrl: './will-kit-layout.component.html',
  styleUrls: ['./will-kit-layout.component.scss']
})
export class WillKitLayoutComponent {
  constructor(private router: Router) {}

  onTabChange(event: MatTabChangeEvent) {
    const tabLabel = event.tab.textLabel.toLowerCase();
    // 导航到辅助路由，更新URL
    this.router.navigate([
      '/will-kit',
      { outlets: { taboutlet: [tabLabel] } }
    ]);
  }
}

3. 初始路由状态处理 #

初始进入/will-kit时，我们用EmptyComponent（一个没有任何内容的空组件）作为默认子路由，这样就能实现只显示标签栏、不加载任何标签内容的需求，避免了默认跳转带来的自动加载问题。

额外注意事项 #

• 辅助路由的URL格式/(outletName:path)是Angular的标准语法，它能帮我们在URL中保存当前激活的标签状态，刷新页面时可以恢复到之前的标签内容。
• 父组件WillKitLayoutComponent只负责标签栏的UI和路由导航逻辑，子组件（StartComponent、SettingsComponent等）专注于自身业务内容，保持组件职责单一。

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