Angular:如何使用和共享条目组件(例如表单)以进行延迟加载

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

例如,我在整个应用程序中共享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,exports: [
    ShadeComponent,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模块。

我在做什么错?

poboco 回答:Angular:如何使用和共享条目组件(例如表单)以进行延迟加载

该错误表示您试图在尚未导入其中任何一个的模块中使用FormsModuleReactiveFormsModule中的属性。

我发现您已将它们包含在SharedModule exports 数组中,但从未将它们添加到 imports 数组中。据我所知,您不能导出以前未导入或声明的内容。我认为在您的FormsModule中添加ReactiveFormsModule和/或SharedModule.imports将解决此问题。

本文链接:https://www.f2er.com/3167467.html

大家都在问