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，因此，当用户单击按钮时，该页面将加载不同的组件item-list。（不是主菜单）

我尝试在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)
  ]

角度路由器链接延迟加载

1 个答案: