Angular 2+同一懒加载模块实现根路径路由至对应组件

嘿，这个需求完全可以实现！你想要让/portfolio和/dashboard这两个根路径直接加载同一懒加载模块里的不同组件，我给你分享两种实用的方案，任选其一都能搞定：

方案一：使用路由守卫匹配父路径（推荐） #

这种方案更贴合Angular路由的设计逻辑，不需要额外的容器组件，通过守卫判断父路由路径来加载对应组件：

1. 保持app-routing.module.ts的现有配置，两个路径都指向你的懒加载模块：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'portfolio',
    loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
  },
  {
    path: 'dashboard',
    loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
  },
  // 其他路由配置...
];

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

2. 在懒加载模块中创建两个路由守卫，用来校验当前父路由的路径：

// portfolio.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot } from '@angular/router';

@Injectable({ providedIn: 'root' })
export class PortfolioGuard implements CanActivate {
  canActivate(route: ActivatedRouteSnapshot): boolean {
    // 检查父路由是否为'portfolio'
    return route.parent?.url[0].path === 'portfolio';
  }
}

// dashboard.guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot } from '@angular/router';

@Injectable({ providedIn: 'root' })
export class DashboardGuard implements CanActivate {
  canActivate(route: ActivatedRouteSnapshot): boolean {
    // 检查父路由是否为'dashboard'
    return route.parent?.url[0].path === 'dashboard';
  }
}

3. 配置懒加载模块的路由，给两个空路径路由分别绑定组件和对应守卫：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { PortfolioComponent } from './portfolio/portfolio.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { PortfolioGuard } from './portfolio.guard';
import { DashboardGuard } from './dashboard.guard';

const routes: Routes = [
  // 父路径为/portfolio时，加载PortfolioComponent
  {
    path: '',
    component: PortfolioComponent,
    pathMatch: 'full',
    canActivate: [PortfolioGuard]
  },
  // 父路径为/dashboard时，加载DashboardComponent
  {
    path: '',
    component: DashboardComponent,
    pathMatch: 'full',
    canActivate: [DashboardGuard]
  },
  // 你的其他子路由（比如/portfolio/detail或/dashboard/stats）
  { path: 'detail', component: PortfolioDetailComponent },
  { path: 'stats', component: DashboardStatsComponent }
];

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

配置完成后，访问https://example.com/portfolio会直接加载PortfolioComponent，访问https://example.com/dashboard则加载DashboardComponent，同时子路由也能正常工作。

方案二：使用容器组件动态渲染 #

如果你不想写守卫，这种方案更简单，通过一个容器组件根据父路径动态渲染目标组件：

1. 创建一个容器组件作为懒加载模块的根路由组件：

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

@Component({
  selector: 'app-lazy-root',
  template: `
    <app-portfolio *ngIf="activePath === 'portfolio'"></app-portfolio>
    <app-dashboard *ngIf="activePath === 'dashboard'"></app-dashboard>
  `
})
export class LazyRootComponent implements OnInit {
  activePath!: string;

  constructor(private route: ActivatedRoute) { }

  ngOnInit(): void {
    // 获取父路由的路径（portfolio或dashboard）
    this.activePath = this.route.parent?.snapshot.url[0].path || '';
  }
}

2. 配置懒加载模块的路由，将空路径指向这个容器组件：

const routes: Routes = [
  { path: '', component: LazyRootComponent },
  // 你的其他子路由...
  { path: 'detail', component: PortfolioDetailComponent },
  { path: 'stats', component: DashboardStatsComponent }
];

App路由的配置和方案一保持一致即可，访问两个根路径时，容器组件会自动根据父路径渲染对应的目标组件。

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