Angular带权限动态嵌套Tabs：父标签重点击默认组件不渲染问题

问题描述 #

Angular应用存在两级Tabs，第二级Tabs受权限控制：仅当用户拥有对应权限时才显示该Tab。点击父Tab（Dashboard）时，首次能正常跳转到用户有权限的第一个子组件；但再次点击Dashboard时，第二级Tabs正常显示，却未渲染默认子组件。

问题截图 #

• 首次点击Dashboard的正常状态：
  
• 再次点击Dashboard的异常状态：
  

解决方案 #

核心思路：在父路由激活或父Tab点击时，动态计算用户有权限的第一个子路由，并主动触发导航，避免停留在父路由路径导致子组件不渲染。

方法1：父组件内监听路由变化并处理重定向 #

在Dashboard组件中，监听路由导航事件，当路由跳转到父路由（/dashboard）时，自动导航到第一个有权限的子路由：

import { Router, NavigationEnd, ActivatedRoute } from '@angular/router';
import { filter } from 'rxjs/operators';
import { OnInit } from '@angular/core';

export class DashboardComponent implements OnInit {
  constructor(private router: Router, private route: ActivatedRoute) {}

  ngOnInit() {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe((event: NavigationEnd) => {
      // 匹配父路由路径
      if (event.urlAfterRedirects === this.route.routeConfig?.path) {
        // 获取用户有权限的子路由路径列表（替换为你的权限判断逻辑）
        const allowedChildPaths = this.getAllowedChildPaths();
        if (allowedChildPaths.length > 0) {
          // 导航到第一个有权限的子路由
          this.router.navigate([allowedChildPaths[0]], { relativeTo: this.route });
        }
      }
    });
  }

  // 示例：根据权限返回允许的子路由路径
  private getAllowedChildPaths(): string[] {
    // 这里替换为实际权限校验逻辑，比如从权限服务获取
    return ['self-service2'];
  }
}

方法2：使用路由守卫实现动态重定向 #

创建路由守卫，在父路由激活时自动重定向到有权限的第一个子路由：

1. 定义路由守卫：

import { Injectable } from '@angular/core';
import { CanActivate, Router, ActivatedRouteSnapshot } from '@angular/router';

@Injectable({ providedIn: 'root' })
export class DashboardRedirectGuard implements CanActivate {
  constructor(private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot): boolean {
    // 获取有权限的子路由路径
    const allowedChildPaths = this.getAllowedChildPaths();
    if (allowedChildPaths.length > 0) {
      // 重定向到第一个有权限的子路由
      this.router.navigate([allowedChildPaths[0]], { relativeTo: route });
      return true;
    }
    // 无权限时的处理逻辑（比如跳转到无权限页面）
    this.router.navigate(['/unauthorized']);
    return false;
  }

  private getAllowedChildPaths(): string[] {
    // 替换为实际权限校验逻辑
    return ['self-service2'];
  }
}

2. 在路由配置中应用守卫：

import { DashboardRedirectGuard } from './dashboard-redirect.guard';

const routes: Routes = [
  {
    path: 'dashboard',
    component: DashboardComponent,
    canActivate: [DashboardRedirectGuard],
    children: [
      { path: 'self-service1', component: SelfService1Component },
      { path: 'self-service2', component: SelfService2Component }
      // 其他子路由
    ]
  }
];

原理说明 #

重复点击父Tab时，路由会导航到父路由路径（/dashboard），而此时没有配置静态默认子路由，因此不会自动加载子组件。通过上述方法，在父路由激活时主动检测并跳转到有权限的第一个子路由，确保每次点击父Tab都能正确渲染默认子组件。

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