具有延迟加载的角路由器链接答案

【问题标题】：Angular routerLink with lazy loading具有延迟加载的角路由器链接
【发布时间】：2019-11-28 03:39:08
【问题描述】：

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

我有一个有两个“页面”的 Angular 应用程序。页面 = 带有模块的普通组件。而且我有一堆“组件”连接在一个模块中。（这是文件结构 - 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
  }

但我收到一个错误提示

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

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

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

【问题讨论】：

两个懒加载的路由怎么会有相同的路径？
@PierreDuc 管理页面的 module.ts 中有一个path: 'admin'。因此，当您加载页面/管理员时，它会加载页面:)
你应该在那里删除它，并将其添加到应用程序路由

标签： angular

【解决方案1】：

通过调用 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)
  ]

【讨论】：