Angular路由导航时Tab导航栏消失，如何实现默认加载且稳定切换？

嘿，我完全懂你遇到的这个问题——点击Tab链接时导航栏直接消失，本质是你的路由配置让子组件直接替换了父容器组件，导致Tab栏被卸载了。咱们一步步来调整：

1. 重构Module1的路由配置 #

首先得把ContainerComponent设为父路由，让MyIdentityComponent和UsersComponent作为它的子路由。这样导航到子路径时，父容器会一直保留，子组件只在父容器内部渲染。

在Module1的路由文件（比如identity-routing.module.ts）里修改路由规则：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ContainerComponent } from './container/container.component';
import { MyIdentityComponent } from './my-identity/my-identity.component';
import { UsersComponent } from './users/users.component';

const routes: Routes = [
  {
    path: 'identity',
    component: ContainerComponent, // 把Container作为父路由组件
    children: [
      { path: 'my-identity', component: MyIdentityComponent },
      { path: 'users', component: UsersComponent },
      { path: '', redirectTo: 'my-identity', pathMatch: 'full' } // 点击Module1默认加载My Identity
    ]
  }
];

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

2. 给Container组件添加子路由出口 #

你的Container组件现在只有Tab导航，还需要一个<router-outlet>来承载子组件的渲染。修改Container的HTML代码：

<nav mat-tab-nav-bar>
  <!-- 使用相对路由，并通过Router判断Tab激活状态 -->
  <a mat-tab-link 
     [routerLink]="['./my-identity']" 
     [active]="router.url.includes('/identity/my-identity')">
    My Identity
  </a>
  <a mat-tab-link 
     [routerLink]="['./users']" 
     [active]="router.url.includes('/identity/users')">
    Users
  </a>
</nav>
<!-- 新增子路由出口，子组件会在这里渲染 -->
<router-outlet></router-outlet>

3. 在Container组件注入Router处理激活状态 #

要让Tab的激活状态正常生效，需要在Container组件里注入Router：

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-container',
  templateUrl: './container.component.html',
  styleUrls: ['./container.component.css']
})
export class ContainerComponent {
  constructor(public router: Router) { } // 用public让模板可以直接访问Router
}

4. 调整侧边栏的Module1跳转链接 #

把侧边栏里指向Module1的链接改成父路由路径/identity，这样点击Module1时会先加载Container组件，再自动重定向到My Identity：

<!-- 侧边栏的Module1链接 -->
<a routerLink="/identity">Module1</a>

这样修改后，点击Module1会默认加载带Tab栏的Container组件，同时自动显示My Identity；切换Tab时，子组件在Container内部的路由出口渲染，Tab导航栏就会一直保留啦！

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