在不创建循环依赖的情况下从延迟加载的 routing.module 中检索路由到 child 组件

Question

场景

我想在用户获得授权并能够访问后延迟加载模块。
惰性加载模块有 child 路由也受到保护。因此有一个路由模块定义了 child 路由。

我想达到的目标

我想从组件 (admin.component.ts) 访问 child 路由配置（来自 routing.module.ts），该组件是延迟加载模块的一部分，以生成导航菜单/列表child 条路线。

目前的情况

app-routing.module.ts（部分）

...
export const routes: Routes = [
...
  {
    path: 'admin',
    loadChildren: () => import('./pages/admin/admin.module').then(m => m.AdminModule),
    canActivate: [AuthGuard],
    data: {
      title: 'Administration',
      icon: 'grade',
      label: 'ADMIN',
      labelAddition: ''
    }
  },
...
]
...

admin-routing.module.ts（部分）

...
export const routes: Routes = [
...
  {
    path: '',
    component: AdminComponent
  },
...
]
...

admin.component.ts

import { Component } from '@angular/core';
import { routes } from './admin-routing.module';

@Component({
  template: `<app-sub-nav [links]="links"></app-sub-nav>`
})
export class AdminComponent {
  links = routes;
  constructor() { }
}

sub-nav.component.html（部分）

...
<a *ngFor="let link of links" [routerLink]="['./' + link.path]">
...

有什么问题？

设置工作正常，除了它显然创建了一个循环依赖，它不再适用于模块的动态导入：

Circular dependency detected:
src\app\pages\admin\admin-routing.module.ts -> src\app\pages\admin\admin.component.ts -> src\app\pages\admin\admin-routing.module.ts

到目前为止我尝试了什么？

因为我实际上只需要 child 路线的自定义数据（标题、文本、图标...）来创建导航菜单，所以我添加了一个数据属性，其中包含所有路线（再次）：

admin-routing.module.ts（部分）

...
export const routes: Routes = [
...
  {
    path: '',
    component: AdminComponent,
    data: {
      routes: [
      {
        path: '...',
        data: {
         icon: '...'
...
        }
...
      },
...
      ]
    }
  },
...
]
...

我不喜欢，我想有一个通用的方式
遗憾的是，延迟加载的路由无法访问 router.config 之类的内容来检索其自定义数据。

有什么想法吗？

Answer 1

如果我正确理解了这种情况：您想使用来自延迟加载和受保护模块的链接来填充您的导航。所以你想访问延迟加载模块的路由来构建你的侧边导航。我的建议是在根范围内创建一个名为 NavigationService 的服务。制作负责跟踪导航链接的导航服务。提供方法 add remove 链接和事件（更可能是可观察的），例如 navigationChanged。在您的惰性模块中导入该服务并调用 add 方法来添加链接，并在您的侧面板组件中导入相同的服务并订阅 navigationChanged 事件以修改您的导航布局。

在不创建循环依赖的情况下从延迟加载的 routing.module 中检索路由到 child 组件

Retrieve routes from lazily loaded routing.module into child component without creating a circular dependency

angular

angular-router

angular8

场景

我想达到的目标

目前的情况

有什么问题？

到目前为止我尝试了什么？