Angular 14路由：如何根据用户角色为同一路径绑定不同组件

方案1：动态组件加载（无*ngIf） #

创建一个路由容器组件，路由指向该容器后，在组件内部根据用户角色动态渲染对应组件：

1. 修改路由配置

const routes = [
  {
    path: '',
    component: RoleBasedComponent,
    canActivate: [RoleGuard] // 先验证用户是否拥有合法角色
  }
];

2. 实现RoleBasedComponent容器组件

import { Component, OnInit, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { AuthService } from '../auth.service'; // 假设你有获取用户角色的服务
import { ComponentA } from './component-a'; // RoleA对应组件
import { ComponentB } from './component-b'; // RoleB对应组件

@Component({
  template: '<ng-template #componentContainer></ng-template>'
})
export class RoleBasedComponent implements OnInit {
  @ViewChild('componentContainer', { read: ViewContainerRef }) container!: ViewContainerRef;

  constructor(
    private authService: AuthService,
    private componentFactoryResolver: ComponentFactoryResolver
  ) {}

  ngOnInit(): void {
    this.loadComponentByRole();
  }

  private loadComponentByRole(): void {
    const userRole = this.authService.getCurrentUserRole();
    let componentClass;

    switch(userRole) {
      case 'RoleA':
        componentClass = ComponentA;
        break;
      case 'RoleB':
        componentClass = ComponentB;
        break;
      default:
        // 处理无权限场景，比如跳转403或加载默认组件
        return;
    }

    const factory = this.componentFactoryResolver.resolveComponentFactory(componentClass);
    this.container.createComponent(factory);
  }
}

3. 模块配置：将RoleBasedComponent、ComponentA、ComponentB加入模块的declarations数组，Angular 9+ Ivy 模式下可省略entryComponents，低版本需添加。

方案2：动态修改路由配置 #

在模块初始化阶段，根据用户角色动态替换对应路径的组件：

import { NgModule, OnInit } from '@angular/core';
import { RouterModule, Router } from '@angular/router';
import { AuthService } from '../auth.service';
import { RoleGuard } from './guard';
import { ComponentA } from './component-a';
import { ComponentB } from './component-b';

@NgModule({
  imports: [RouterModule.forChild([])], // 初始为空配置
  exports: [RouterModule]
})
export class SubModule implements OnInit {
  constructor(
    private router: Router,
    private authService: AuthService
  ) {}

  ngOnInit(): void {
    const userRole = this.authService.getCurrentUserRole();
    const targetComponent = userRole === 'RoleA' ? ComponentA : ComponentB;

    // 动态添加路由规则
    this.router.config.unshift({
      path: '',
      children: [
        { 
          path: '', 
          component: targetComponent, 
          canActivate: [RoleGuard], 
          data: { roles: [userRole] } 
        }
      ]
    });
  }
}

注意：需确保在获取到用户角色后再初始化该模块，比如登录成功后加载模块，否则无法正确获取角色信息。

方案3：结合路由resolve预加载组件信息 #

通过路由resolve提前获取角色对应组件，再在容器中加载：

1. 路由配置

import { ComponentResolver } from './component.resolver';

const routes = [
  {
    path: '',
    component: RoleBasedComponent,
    canActivate: [RoleGuard],
    resolve: {
      targetComponent: ComponentResolver
    }
  }
];

2. 实现ComponentResolver

import { Injectable } from '@angular/core';
import { Resolve } from '@angular/router';
import { AuthService } from '../auth.service';
import { ComponentA } from './component-a';
import { ComponentB } from './component-b';

@Injectable()
export class ComponentResolver implements Resolve<any> {
  constructor(private authService: AuthService) {}

  resolve(): any {
    const userRole = this.authService.getCurrentUserRole();
    return userRole === 'RoleA' ? ComponentA : ComponentB;
  }
}

3. 更新RoleBasedComponent

import { Component, OnInit, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  template: '<ng-template #componentContainer></ng-template>'
})
export class RoleBasedComponent implements OnInit {
  @ViewChild('componentContainer', { read: ViewContainerRef }) container!: ViewContainerRef;

  constructor(
    private route: ActivatedRoute,
    private componentFactoryResolver: ComponentFactoryResolver
  ) {}

  ngOnInit(): void {
    const targetComponent = this.route.snapshot.data['targetComponent'];
    const factory = this.componentFactoryResolver.resolveComponentFactory(targetComponent);
    this.container.createComponent(factory);
  }
}

Angular路由采用从上到下顺序匹配规则，当匹配到第一个路径为空的路由后，会停止后续路由的匹配逻辑，因此第二个同路径的路由永远不会被触发。即使两个路由的data.roles不同，Angular也不会重复匹配，只会使用第一个匹配项。

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