0

注意- 我已经有 6 个组件HomeComponent，其中一些是基于外部库的，它们运行良好。我只在延迟加载大量基于FormsModule. 我想延迟加载我的 ContactUsComponent 而不导入ContactUsModule任何地方。

我的contact-us.module.ts长相是这样的——

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ContactUsComponent } from './contact-us.component';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RecaptchaFormsModule, RecaptchaModule } from 'ng-recaptcha';
import { NgxIntlTelInputModule } from 'ngx-intl-tel-input';
import { CommonFeaturesModule } from '../common-features/common-features.module';
import { FooterModule } from '../footer/footer.module';
import { HttpClientModule } from '@angular/common/http';
import { ContactUsService } from './contact-us.service';
import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
import { ToastrModule } from 'ngx-toastr';

@NgModule({
  declarations: [ContactUsComponent],
  imports: [
    CommonModule,
    HttpClientModule,
    FormsModule, ReactiveFormsModule,
    RecaptchaModule,
    RecaptchaFormsModule,
    NgxIntlTelInputModule,
    CommonFeaturesModule,
    FooterModule,
    BsDropdownModule.forRoot(),
    ToastrModule.forRoot(),
  ],
  exports: [ContactUsComponent],
  providers: [ContactUsService],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class ContactUsModule {
}

我想延迟加载ContactUsComponentin home.component.tsusing ComponentFactoryResolver. 但是ContactUsModule在我的HomeModule.

home.component.ts

  @ViewChild('contactUsContainer', { read: ViewContainerRef })
  contactUsContainer: ViewContainerRef;

  loadContactUsContainer() {
    import('../contact-us/contact-us.component').then(
      ({ ContactUsComponent }) => {
        const componentFactory =
          this.componentFactoryResolver.resolveComponentFactory(
            ContactUsComponent
          );
        this.contactUsContainer.createComponent(componentFactory);
      }
    );
  }

home.component.html

 <div #contactUsContainer></div>
4

0 回答 0