Angular，如何在延迟加载的模块中包含多个组件? [英] Angular, how to include multiple components in a lazy loaded module?

问题描述

在我的主页上，我有 4 个组件链接，这些组件都属于名为CrudModule"的功能模块.

On my homepage I have 4 links to components that all belong to a feature module called 'CrudModule'.

我想知道如何延迟加载这个模块，这似乎不起作用:

I'm wondering how to lazy load this module, this doesn't seem to work :

我的 app-routing.module.ts:

const routes: Routes = [
   { path: 'add', loadChildren: () => import(`./crudFeatureModule/crud.module`).then(x => x.CrudModule) }
  , { path: 'search', loadChildren: () => import(`./crudFeatureModule/crud.module`).then(x => x.CrudModule) }
  , { path: 'importer', loadChildren: () => import(`./crudFeatureModule/crud.module`).then(x => x.CrudModule) }
  , { path: 'publier', loadChildren: () => import(`./crudFeatureModule/crud.module`).then(x => x.CrudModule) }
];

在官方的 Angular 文档中，每个模块只提到一个组件，见
这个例子来自 https://angular.io/guide/lazy-loading-ngmodules:

In the official Angular docs only one component per module is mentioned, see
this example from https://angular.io/guide/lazy-loading-ngmodules :

app-routing.module.ts:

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: () => import('./customers/customers.module').then(mod => mod.CustomersModule)
  },

customers-routing.module.ts:

  import { CustomerListComponent } from './customer-list/customer-list.component';

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

以上路径设置为空字符串.这是因为 AppRoutingModule 中的路径已经设置为customers".

The above path is set to an empty string. This is because the path in AppRoutingModule is already set to 'customers'.

问题:鉴于延迟加载模块的路径始终需要为空，这是否意味着我应该将所有组件放在不同的模块中以实现延迟加载?换句话说，延迟加载的模块可以处理多个路由吗?如果是这样，我应该怎么做?

Question : given that that the path of a lazy loaded module always needs to be empty, does this mean that I should put all my components in different modules in order to implement lazy loading? In other words can a lazy loaded module handle multiple routes ? If so, how should I go about it?

推荐答案

通常，您的主路由器模块中的路由看起来像这样:

Normally, you'd have your routes in your main router module look something like this:

const routes: Routes = [
  {
    path: 'crud',
    loadChildren: () => import('./crudFeatureModule/crud.module').then(mod => mod.CrudModule)
  }
];

并调用RouterModule.forRoot(routes).

然后，在您的 CrudModule 中，您将:

Then, in your CrudModule, you would have:

const routes: Routes = [
  { path: 'add', component: AddComponent },
  { path: 'search', component: SearchComponent },
  { path: 'importer', component: ImporterComponent },
  { path: 'publier', component: PublierComponent }
];

并调用RouterModule.forChild(routes).

您的 URL 将是 /crud/add、/crud/search 等

Your URLs would then be /crud/add, /crud/search etc.

当你使用loadChildren时，你延迟加载的模块需要知道如何加载子路由，即它需要将它的路由注册到RouterModule.明白我的意思吗?

When you use loadChildren, the module you lazily load needs to know how to load child routes, i.e. it needs to register its routes to the RouterModule. Get what I mean?

附言通常认为在构建路由时坚持使用一种语言是最佳实践.Je présume par le nom des routes que tu es francophone :-) généralement on évite de mélanger français et anglais si possible ^^

P.S. It's generally considered best practice to stick to one language when building routes. Je présume par le nom des routes que tu es francophone :-) généralement on évite de mélanger français et anglais si possible ^^

这篇关于Angular，如何在延迟加载的模块中包含多个组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！