【问题标题】:Angular, how to include multiple components in a lazy loaded module?Angular,如何在延迟加载的模块中包含多个组件?
【发布时间】:2019-12-15 01:36:22
【问题描述】:

在我的主页上,我有 4 个指向组件的链接,它们都属于一个名为“CrudModule”的功能模块。

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

我的 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

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 中的路径已设置为“客户”。

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

【问题讨论】:

  • 当你说它不起作用时,究竟发生了什么?一般来说,您会有一个延迟加载子模块的父路由,并且该子模块将有自己的内部路由。您可以在一个模块中拥有任意数量的组件。
  • 这个问题好像不太清楚,能不能说的具体点
  • 它不起作用,因为我的功能模块只识别空路径:用户点击的路径。我的意思是延迟加载的模块只能有一个路径,它应该始终为空?
  • 您可以将path: '' 用于所有延迟加载的模块,然后在子路由中设置额外的路由,例如search
  • @OleEHDufour 这里是一个简单路由的示例 Angular 应用程序(虽然不是延迟加载),可以帮助您了解您的问题:github.com/JOELJOSEPHCHALAKUDY/angular-github-user-info-demo/…

标签: angular routes lazy-loading


【解决方案1】:

如果你想加载在自己的页面中分离的每个组件,你必须为每个组件创建模块,这取决于你。

我实现了我的应用程序的路由,比如打击和这个工作

  { path: 'person', loadChildren: './projects/person/person.module#PersonModule' },

【讨论】:

  • 我只是想避免为每个组件创建一个模块 ;-)
【解决方案2】:

通常,您的主路由器模块中的路由如下所示:

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

并致电RouterModule.forRoot(routes)

然后,在您的 CrudModule 中,您将拥有:

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

并致电RouterModule.forChild(routes)

您的网址将是 /crud/add/crud/search 等。

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

附:在构建路线时,通常认为最好的做法是坚持一种语言。 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 ^^

【讨论】:

  • 我忽略了在我的路线中使用多个路段的可能性。我会试试的,我猜你回答了我的问题!
  • 不要忘记在你的 AppModule 和延迟加载的模块中设置路由。仅在您的 AppModule 中调用 RouterModule.forRoot(),然后在每个延迟加载的模块中调用 RouterModule.forChild()。这样,所有路由都正确注册。
  • 我会的!感谢您的努力和时间。
  • @WillAlexander 谢谢,你的回答很有帮助,只是我面临一个问题,当我试图直接访问子路由时说/crud/add 它没有加载任何东西,但给出了错误,你能帮忙吗,谢谢
  • 是的,使用 ng serve,但我设法修复了它,我的 base-href 设置为 ./,将其更改为 /,它现在可以工作了,非常感谢您的时间跨度>
猜你喜欢
  • 2018-09-07
  • 2020-10-16
  • 1970-01-01
  • 2017-02-22
  • 2020-01-24
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-01-01
相关资源
最近更新 更多