Angular 9相同的路由路径不同的组件

// 定义一个路由守卫
@Injectable({
  providedIn: 'root'
})
export class RoleGuard implements CanActivate {
  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    const role = route.data.role;
    // 根据角色决定加载哪个组件
    if (role === 'admin') {
      route.routeConfig.component = AdminComponent;
    } else {
      route.routeConfig.component = UserComponent;
    }
    return true;
  }
}

// 在路由配置中使用路由守卫
const routes: Routes = [
  {
    path: 'dashboard',
    canActivate: [RoleGuard],
    data: { role: 'admin' },
    component: AdminComponent // 默认组件
  }
];

// 定义路由
const routes: Routes = [
  { path: 'dashboard/:type', component: DashboardComponent }
];

// 在组件中获取参数
export class DashboardComponent implements OnInit {
  type: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.route.params.subscribe(params => {
      this.type = params['type'];
      if (this.type === 'admin') {
        // 加载管理员组件
      } else {
        // 加载普通用户组件
      }
    });
  }
}

// 在模板中使用动态组件
<ng-container *ngComponentOutlet="dynamicComponent"></ng-container>

// 在组件中定义动态组件
export class DynamicComponentLoader {
  dynamicComponent: any;

  constructor() {
    // 根据条件决定加载哪个组件
    if (condition) {
      this.dynamicComponent = AdminComponent;
    } else {
      this.dynamicComponent = UserComponent;
    }
  }
}