Question

我们能否以角度4实现动态模块加载。如果是这样的最佳实践？

Answer 1

是的，这是可能的，在Angular世界中，它通常被称为 延迟加载Angular模块 。基本上，您使用 loadChildren 作为懒惰加载的路由，文件路径指向惰性模块。然后该模块将拥有它自己的组件等，这些组件将在加载模块时加载。

有关详细信息，请参阅以下链接：

以下是代码外观的示例：

routes.ts

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { EagerComponent } from './eager.component';

const routes: Routes = [
  { path: '', redirectTo: 'eager', pathMatch: 'full' },
  { path: 'eager', component: EagerComponent },
  { path: 'lazy', loadChildren: 'lazy/lazy.module#LazyModule' }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes);

LazyModule.ts

import { NgModule } from '@angular/core';

import { LazyComponent }   from './lazy.component';
import { routing } from './lazy.routing';

@NgModule({
  imports: [routing],
  declarations: [LazyComponent]
})
export class LazyModule {}

LazyRouting

import { ModuleWithProviders } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { LazyComponent } from './lazy.component';

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

export const routing: ModuleWithProviders = RouterModule.forChild(routes);

在Angular 4及以上版本中，它是实现动态模块加载的好方法。如果是这样，你能用一个例子来解释我。

1 个答案: