时间戳

首页 > 解决方案 > 具有延迟加载的角路由器链接

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 设置为组件（因为我想要的组件是在特定模块中声明的）。

标签： angular

解决方案

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)
  ]

推荐阅读