带有延迟加载的 Angular routerLink

Question

如果此问题已得到解答，我深表歉意。 我还没有发现像我这样的问题。

我有一个有两个“页面”的角度应用程序。 页面 = 带有模块的普通组件。 我有一堆连接在一个模块中的“组件”。 （这是文件结构 - https://i.imgur.com/fs6tXgg.png ）

现在，在app-routing.module ，我使用延迟加载来加载两个页面。 像这样：

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./pages/user/user.module').then(mod => mod.UserModule)
  },
  {
    path: '',
    loadChildren: () => import('./pages/admin/admin.module').then(mod => mod.AdminModule)
  }
];

这很好用。 在用户页面中，我加载了主菜单组件。 ..<app-main-menu></aapp-main-menu>...

问题- 但现在，我想将routerLink="/hotels添加到主菜单组件中的按钮，在用户页面中，因此当用户单击按钮时，页面将加载不同的组件，项目列表。（不是主菜单）

我尝试在app-routing.module.ts添加一个新路径：

  {
    path: 'item-list',
    component: ItemListComponent
  }

但我得到一个错误说

Component MainMenuComponent 不是任何 NgModule 的一部分，或者该模块尚未导入到您的模块中。

出现这个错误的原因是item-list.component加载到user-components.module.ts中，在user.module.ts（页面加载的主模块）中调用。

所以全局问题是：如何在使用延迟加载时将 routerLink 设置为组件（因为我想要的组件是在特定模块中声明的）。

Answer 1

Kinda 通过调用 app-routing.module.ts 中包含该组件的模块来解决该问题

  {
    path: 'list',
    loadChildren: () => import('./components/user-components/user-components.module').then(mod => mod.UserComponentsModule)
  }

user.module 有：

const routes: Routes = [
  {
    path: '',
    component: UserComponent
  }
];

...
  imports: [
    RouterModule.forChild(routes)
  ]