在多角度组件中使用组件延迟加载吗？

编程问答 2022-06-19

问题描述

我有三个组件（ NavbarComponent ， IndexComponent ， PoweredComponent ），所以我使用延迟加载，我需要在多个组件中使用组件，不知道如何在惰性模块中声明要使用的组件。我将向您展示不同文件的一些相关部分：

  1. NavbarComponent
    navbar.module.ts 
  declarations: [NavbarComponent],imports: [
    CommonModule
  ],exports: [NavbarComponent]
})
  1. IndexComponent
    Index.module.ts 
  declarations: [IndexComponent,NavbarComponent],imports: [
    CommonModule,IndexRoutingModule,],})

index.component.html 

<app-navbar></app-navbar>
<div>...</div>

在索引中显示导航栏

index.component.html

  1. PoweredComponent
    powered.module.ts 
@NgModule({
  declarations: [PoweredComponent,PoweredRoutingModule,})

powered.component.html 

<app-navbar></app-navbar>
<div>...</div>

在powered.component.html中没有显示导航栏

未在多个组件中显示的问题<app-navbar></app-navbar>可以在索引组件中显示jsut

请帮助我？？？
谢谢阅读！！！

解决方法

您不能在多个NgModule中声明一个组件（使用declarations）。 在您的情况下，NavbarModule导出NavBarComponent时，您只需要在PoweredModule和IndexModule中导入模块，即可在这些模块中使用该组件。>

以IndexModule为例：

 declarations: [IndexComponent],imports: [
    CommonModule,IndexRoutingModule,NavbarModule
  ],})
,

Index.module.ts 

  declarations: [IndexComponent],})

powered.module.ts 

@NgModule({
  declarations: [PoweredComponent],PoweredRoutingModule,})
angularangularangular-componentsangular-module