如何在app.component.ts判断URL所属懒加载模块及路由数据配置与访问

当然可以给懒加载路由附加自定义data啦！这正是Angular路由体系里非常实用的特性，完美匹配你要判断当前URL所属模块的需求。我一步步给你讲清楚配置和使用方法：

首先在你的根路由配置文件（比如app-routing.module.ts）里，给懒加载的模块路由添加data属性。以你的Contacts模块为例，配置如下：

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

const routes: Routes = [
  // 其他路由...
  {
    path: 'Contacts',
    // 懒加载Contacts模块
    loadChildren: () => import('./contacts/contacts.module').then(m => m.ContactsModule),
    // 附加模块标识的data
    data: { moduleName: 'Contacts' }
  },
  // 其他懒加载模块同理，比如：
  // {
  //   path: 'Orders',
  //   loadChildren: () => import('./orders/orders.module').then(m => m.OrdersModule),
  //   data: { moduleName: 'Orders' }
  // }
];

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

这里要注意：父路由的data会被子路由继承，所以Contacts模块下的所有子路由（比如/Contacts/ContactsList、/Contacts/NewContact）都会自动关联这个moduleName，不用在子路由里重复配置。如果某个子路由需要单独标识，也可以在子路由里覆盖data属性。

接下来要在app.component.ts里监听路由变化，获取当前激活路由的data。因为懒加载模块的路由解析是异步的，所以我们需要监听导航完成的事件，再去遍历路由树获取data：

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  currentModule: string | undefined;

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

  ngOnInit(): void {
    // 监听导航完成事件，确保路由已经完全解析（包括懒加载模块）
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe(() => {
      // 递归遍历路由树，找到带有moduleName的data
      this.currentModule = this.extractModuleName(this.activatedRoute.root);
      console.log('当前所属模块:', this.currentModule);
      // 这里就可以根据currentModule做你需要的业务逻辑了
    });
  }

  private extractModuleName(route: ActivatedRoute): string | undefined {
    // 先检查当前路由的data
    if (route.data && route.data['moduleName']) {
      return route.data['moduleName'];
    }
    // 如果当前路由没有，递归检查子路由
    for (const childRoute of route.children) {
      const moduleName = this.extractModuleName(childRoute);
      if (moduleName) {
        return moduleName;
      }
    }
    return undefined;
  }
}

关键说明： #

• 监听NavigationEnd事件：懒加载模块的路由是异步加载的，只有导航完成后，路由快照才是完整的，这时候才能正确获取到data。
• 递归遍历路由树：因为当前激活的可能是子路由（比如/Contacts/ContactsList），它本身没有data，但父路由（/Contacts）有，所以需要递归查找整个路由树，找到带有moduleName的那个路由的data。

现在当你访问http://localhost:4200/Contacts/ContactsList或http://localhost:4200/Contacts/NewContact时，app.component.ts里的currentModule都会被设置为Contacts，完全符合你的需求。

如果后续新增其他懒加载模块，只需要在根路由里给对应的模块路由添加data: { moduleName: 'XXX' }，然后在AppComponent里就能自动识别啦！

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