Angular 5：如何在懒加载模块的组件内获取其根路由？

当然可以啦！在Angular中，不管你是想在懒加载模块的组件里拿到当前激活的完整路由，还是只想获取模块本身的根路径（比如/parent），都有对应的实现方式。下面结合你的场景给你详细说明：

方法一：在组件中获取当前完整激活路由 #

如果你需要在ParentComponent或者它的子组件里拿到当前的完整路由（比如/parent/child1/123），可以通过注入Router和ActivatedRoute来实现：

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

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html'
})
export class ParentComponent implements OnInit {
  currentFullRoute: string;

  constructor(private router: Router, private activatedRoute: ActivatedRoute) { }

  ngOnInit(): void {
    // 方式1：通过路由快照直接获取（适合初始化时的静态路径）
    const fullUrlTree = this.router.createUrlTree([], { relativeTo: this.activatedRoute.root });
    this.currentFullRoute = this.router.serializeUrl(fullUrlTree);
    console.log('当前完整路由（快照）:', this.currentFullRoute);

    // 方式2：监听路由变化，实时更新路径（适合路由切换场景）
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe((event: NavigationEnd) => {
      this.currentFullRoute = event.url;
      console.log('当前完整路由（实时）:', this.currentFullRoute);
    });
  }
}

• 方式1适合组件初始化时获取当前路由，一次性拿到结果；
• 方式2适合需要监听路由切换，实时更新完整路径的场景。

方法二：在懒加载模块初始化时获取路由 #

如果想在ParentModule加载完成时就拿到对应的路由信息，可以借助APP_INITIALIZER来实现，它会在模块初始化时执行指定逻辑：

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

// 定义初始化函数，用于获取路由
export function loadModuleRootRoute(router: Router) {
  return () => new Promise<void>((resolve) => {
    router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe((event: NavigationEnd) => {
      // event.url就是当前完整的路由路径
      console.log('懒加载模块初始化时的完整路由:', event.url);
      resolve();
    });
  });
}

@NgModule({
  declarations: [ParentComponent, Child1Component, Child2Component],
  imports: [/* 你的路由模块和其他依赖 */],
  providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: loadModuleRootRoute,
      deps: [Router],
      multi: true
    }
  ]
})
export class ParentModule { }

额外需求：只获取懒加载模块的根路径（比如/parent） #

如果你不需要当前激活的子路由，只想拿到懒加载模块本身的根路径（也就是AppRoutingModule里配置的parent路径），可以通过遍历ActivatedRoute的pathFromRoot来定位：

// 在ParentComponent的ngOnInit中
const moduleRootRoute = this.activatedRoute.pathFromRoot
  // 找到带有loadChildren配置的路由节点（也就是懒加载模块的入口路由）
  .find(route => route.routeConfig?.loadChildren);

if (moduleRootRoute?.routeConfig?.path) {
  const moduleRootPath = '/' + moduleRootRoute.routeConfig.path;
  console.log('懒加载模块的根路径:', moduleRootPath); // 输出 /parent
}

这样就能精准拿到懒加载模块对应的根路由啦！

内容的提问来源于stack exchange，提问作者M'sieur Toph'