Angular：如何使用和共享条目组件，例如用于延迟加载的表单

Question

我已将我的应用程序转换为延迟加载路由，但遇到了一些问题。

例如，我有2个表单组件在整个应用程序中共享。

但是，当组件未在应用模块的entryComponents上注册时，它们会崩溃。

例如：

shared.module.ts

import {NgModule} from '@angular/core';
import {CommonModule} from '@angular/common';
import {ShadeComponent} from '../components/loading/shade.component';
import {MaterialModule} from './material.module';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {PrivacyIconComponent} from '../components/privacy-icon/privacy-icon.component';
import {EventActionsComponent} from '../components/event-actions/event.actions.component';
import {ChartsTimelineComponent} from '../components/charts/timeline/charts.timeline.component';
import {ChartsPieComponent} from '../components/charts/pie/charts.pie.component';
import {ChartsXYComponent} from '../components/charts/xy/charts.xy.component';
import {EventCardChartComponent} from '../components/cards/event/chart/event.card.chart.component';
import {EventFormComponent} from '../components/event-form/event.form.component';
import {ActivityFormComponent} from '../components/activity-form/activity.form.component';
import {DeleteConfirmationComponent} from '../components/delete-confirmation/delete-confirmation.component';


@NgModule({
  imports: [
    CommonModule,
    MaterialModule
  ],

  declarations: [
    ShadeComponent,
    PrivacyIconComponent,
    EventActionsComponent,
    ChartsTimelineComponent,
    ChartsPieComponent,
    ChartsXYComponent,
    EventCardChartComponent,
    EventFormComponent,
    ActivityFormComponent,
    DeleteConfirmationComponent,
  ],
  providers: [
  ],
  entryComponents: [
    EventFormComponent,
    ActivityFormComponent,
    DeleteConfirmationComponent,
  ],
  exports: [
    ShadeComponent,
    PrivacyIconComponent,
    EventActionsComponent,
    ChartsTimelineComponent,
    ChartsPieComponent,
    ChartsXYComponent,
    EventCardChartComponent,
    EventFormComponent,
    ActivityFormComponent,
    DeleteConfirmationComponent,
    ReactiveFormsModule,
    FormsModule]

})
export class SharedModule {
}

依赖模块：

import {NgModule} from '@angular/core';
import {MaterialModule} from './material.module';
import {SharedModule} from './shared.module';
import {CommonModule} from '@angular/common';
import {EventRoutingModule} from '../event-routing.module';
import {EventCardComponent} from '../components/cards/event/event.card.component';
import {EventCardMapComponent} from '../components/cards/event/map/event.card.map.component';
import {EventCardStatsComponent} from '../components/cards/event/stats/event.card.stats.component';
import {EventCardLapsComponent} from '../components/cards/event/laps/event.card.laps.component';
import {EventCardToolsComponent} from '../components/cards/event/tools/event.card.tools.component';
import {ActivityIconComponent} from '../components/activity-icon/activity-icon.component';
import {ActivitiesCheckboxesComponent} from '../components/acitvities-checkboxes/activities-checkboxes.component';
import {ActivityActionsComponent} from '../components/activity-actions/activity.actions.component';
import {MapActionsComponent} from '../components/map-actions/map.actions.component';
import {EventCardChartComponent} from '../components/cards/event/chart/event.card.chart.component';
import {EventCardChartActionsComponent} from '../components/cards/event/chart/actions/event.card.chart.actions.component';
import {EventCardDevicesComponent} from '../components/cards/event/devices/event.card.devices.component';
import {ActivityHeaderComponent} from '../components/activity-header/activity-header.component';
import {AgmCoreModule} from '@agm/core';
import {MatPaginatorIntl} from '@angular/material/paginator';
import {MatPaginatorIntlFireStore} from '../components/event-table/event.table.component';


@NgModule({
  imports: [
    CommonModule,
    SharedModule,
    MaterialModule,
    EventRoutingModule,
    AgmCoreModule
  ],
  exports: [],
  declarations: [
    EventCardComponent,
    EventCardMapComponent,
    EventCardStatsComponent,
    EventCardLapsComponent,
    EventCardToolsComponent,
    EventCardChartActionsComponent,
    EventCardDevicesComponent,
    ActivityIconComponent,
    ActivitiesCheckboxesComponent,
    ActivityActionsComponent,
    ActivityHeaderComponent,
    MapActionsComponent,
  ],
  entryComponents: [],
  providers: [
    {provide: MatPaginatorIntl, useClass: MatPaginatorIntlFireStore},
  ],
})


export class EventModule {
}

我得到的错误是：

Template error: Can't bind to 'formGroup' since it isn't a known property of 'form'

但是，您可以看到共享模块确实导入了ReactForms和Angular Form模块。

我在做什么错？

Answer 1

该错误表示您试图在尚未导入它们中的任何一个的模块中使用FormsModule或ReactiveFormsModule中的属性。

我看到您已经将它们包含在SharedModule exports数组中，但是您从未将它们添加到imports数组中。我认为这可以解决问题。