急切加载模块的组件未显示在延迟加载模块中

Question

我有一个具有 MasterPageComponent 的应用程序模块。 MasterPage 组件具有典型的工具栏、页脚、sidenav

          const routes: Routes = [
        {
          path: '',
        component: MasterPageComponent
        },
        {
          path: 'bank-manager',
          loadChildren: () => import('./bank-manager/bank-manager.module').then(m => m.BankManagerModule)
        },
        {
          path: 'account-holder',
          loadChildren: () => import('./account-holder/account-holder.module').then(m => m.AccountHolderModule)
        },
        {
          path: '**',
          redirectTo: ''
        }
      ];

      @NgModule({
        declarations: [
          AppComponent,
          MasterPageComponent,
          SidenavComponent,
          ToolbarComponent,
          FooterComponent,
        ],
        imports: [
          HttpClientModule,
          BrowserModule,
          BrowserAnimationsModule,
          MatToolbarModule,
          MatSidenavModule,
          RouterModule.forRoot(routes),
          DashboardModule, // eagerly loading
        ],
        providers: [AuthenticationService],
        bootstrap: [AppComponent]
      })
      export class AppModule {}

所以在加载时我看到了 MasterPageComponent，我看到了我的工具栏、sidenav 和页脚。 MasterPageComponent.html 看起来像这样。

<div class="container-fluid">
<app-toolbar [inputSideNav]="sideNav"></app-toolbar>
<mat-sidenav-container>
  <mat-sidenav #sideNav mode="side">
    <app-sidenav></app-sidenav>
  </mat-sidenav>
  <mat-sidenav-content>
    <router-outlet></router-outlet>
  </mat-sidenav-content>
</mat-sidenav-container>
<app-footer></app-footer>

一切都很好，直到现在。 但我有一个仪表板模块。 你可以在 app.module.ts 中看到我正在急切地加载这个仪表板模块。 这个仪表板模块有一个 DashPageComponent，它显示 6 个其他组件来制作仪表板。

@NgModule({
  declarations: [
    DashPageComponent,
    TotalBalanceGraphComponent,
    TransfersGraphComponent,
    DepositsGraphComponent,
    DepositsWithdrawalsGraphComponent,
    NotificationsTableComponent,
    TransactionsTableComponent
  ],
  imports: [
    CommonModule
  ],
  exports: [MatTableModule, MatPaginatorModule, MatSortModule]
})
export class DashboardModule {}

我正在尝试在 app.module.ts 中提到的 2 个延迟加载模块之间共享此仪表板模块，我想在两个延迟加载模块的空路径上显示“DashPageComponent”，它是仪表板模块的一部分。 例如在“BankManager”中我做了这个

    export const bankManagerRoutes: Routes = [
  {
    path: '',
    component: DashPageComponent,
    children: [
      {
        path: 'manage-accounts',
        component: ManageAccountsComponent
      },
      {
        path: 'create-new-account',
        component: CreateNewAccountComponent
      }
    ]
  }
];

@NgModule({
  declarations: [
    BankManagerComponent,
    CreateNewAccountComponent,
    ManageAccountsComponent
  ],
  imports: [
    CommonModule,
    RouterModule.forChild(bankManagerRoutes),
    MatTableModule,
    MatPaginatorModule,
    MatSortModule
  ]
})
export class BankManagerModule {}

所以当有人应该去 localhost:4200/bank-manager 时，它应该加载 DashPageComponent。 它已经在 app.module 中热切加载，但我收到此错误。

Component DashPageComponent 不是任何 NgModule 的一部分，或者该模块尚未导入到您的模块中。

它已经是dashboard.module 的ngModule 的一部分，所以问题是什么？

Answer 1

你的模块之间没有神奇的共享，对于组件的使用，你每次都需要将包含组件的模块导入到将使用它们的模块中。

一个好的一般规则是记住

• 如果模块是为组件导入的，则需要在将使用它们的每个模块中导入它

因此，解决您的问题的一个简单方法是将DashboardModule添加到您的BankManagerModule导入数组。

更好的方法是使用SharedModule来构建您的应用程序，该SharedModule可以负责在整个应用程序中声明和导入/导出您需要的内容。 这样，您可以简单地导入SharedModule而不必每次都导入单独的模块。

看看这篇关于它的文章！