如何在Angular 9中延迟加载同一页面的各个组件？答案

【问题标题】：How to lazy load individual components of the same page in Angular 9?如何在Angular 9中延迟加载同一页面的各个组件？
【发布时间】：2021-01-29 22:43:25
【问题描述】：

加载页面中的所有组件或小部件会减慢应用程序的呈现时间。

我希望app-sidebar1、app-body、app-sidebar2 根据优先级一个接一个地加载到 DOM，而不是等待一次下载所有组件并显示屏幕。（在组件本身加载之前，组件使用的空间可能是空白的。

模板文件如下：

<div>
...
<app-sidebar1></app-sidebar1>
<app-body></app-body>
<app-sidebar2></app-sidebar2>
...
</div>

模块文件如下：

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    FooterComponent,
    SecondaryMenuComponent,
    NoHeaderFooterComponent,
  ],
  imports: [
    BrowserModule.withServerTransition({appId: 'serverApp'}),
    BrowserAnimationsModule,
    AppRoutingModule,
    MatToolbarModule,
    FlexModule,
    MatButtonModule,
    MatMenuModule,
    MatListModule,
    MatSidenavModule,
    ExtendedModule,
    MatDialogModule,
    HttpClientModule,
    LoginModule,
    LogoutModule,

    app-sidebar1,
    app-body,
    app-sidebar2

  ],
  providers: [
    {
      provide: 'baseURL', useValue: baseURL,
    },
    SidenavCommunicationService,
    // {provide: LocationStrategy, useClass: HashLocationStrategy},
    UserService,
    AuthGuard,
    PaymentValidityGuard
  ],
  bootstrap: [AppComponent],
})
export class AppModule { }

如何根据紧急程度确定特定组件的下载优先级？

【问题讨论】：

到目前为止你做了什么？您必须显示您的代码或邮政编码 sn-ps。没有人可以告诉您如何编码，如果您发布 stackblitz 链接或您的尝试，我们可以为您提供更好的帮助 :)

标签： html angular ionic-framework lazy-loading

【解决方案1】：

但是对于您的答案，一般的答案是制作一个像 ABC 模块这样的模块，然后在 ABC 模块内有子 1 和子 2 组件。如果 Child 1 和 Child 2 本身就更大，您可以将它们设为功能模块。那么 Child 1 是一个模块，它将有自己的 sub child 1 组件等。这就是这个概念的一般工作方式。划分为模块。

【讨论】：