angular - 错误TypeError:无法读取 Angular 4中未定义的属性'createComponent'

我是新的角度4和我使用“动态组件加载”的项目，但有问题的createcomponent加载组件。

在上图中有四个部分。
顶部（头部组件）
事件部分（事件组件）
注：事件部分有两个动态组件（2.1、2.2）
2.1。特定事件的事件详细信息部分（eventdetailcomponent）
2.2。用户窗体节（userformcomponent）
当点击顶部标题中的“event”选项卡时，我们将点击event api和
在左侧栏中显示事件，然后点击事件详细信息API加载
“2.1事件详细信息”屏幕。单击“显示用户”，然后再次加载
“2.2用户表单”动态表单。
问题：
当点击特定事件的事件细节api，api现在处于等待状态，然后用户单击“创建事件”选项卡，然后它将创建事件屏幕，再次用户单击事件选项卡，然后显示事件细节的createcomponent错误。同时单击添加用户按钮，然后再次显示相同的错误。
代码：

ngAfterViewInit() {
  this.getEventList('init');
}

public getEventList(listsource) {
  this.appService.getJsonRequest(AppSettings.EVENT_LIST).subscribe(result => {
    if (result.status === 200  && result.events) {
      this.events = result.events;
      this.publicEvents = result.events;
      this.events[0].selected = true;
      this.selectedEVentInfo = this.events[0];
      this.noImgFlag = true;
      this.eventDetailFlag = false;
        this.eventDetailInfo(listsource);
    } else {
      this.loaderMsg = AppSettings.EVENT_LIST_ERROR_MSG;
    }
    // this.loaderFlag = false;
  }, err => {
    this.loaderMsg = AppSettings.EVENT_LIST_ERROR_MSG;
    this.loaderFlag = false;
    this.snackBar.open(err, AppSettings.CLOSE, {
      duration: AppSettings.DURATION,
    });
  });
}


  eventDetailInfo  (event, source: String = null) { // event detail
   console.log('### Get event detail information');
   if (this.eventDetailFlag === false) {
    if ((source === 'list' || source === 'delete' || source === 'stripe') && this.ed !== undefined) { // testing needed
      console.log('clear');
      this.ed.clear();
    }

        let edCompFactory: ComponentFactory<any>;
        edCompFactory = this.compFactoryResolver.resolveComponentFactory(EdComponent);
        const componentRef = this.ed.createComponent(edCompFactory);
        (<EdComponent>componentRef.instance).event = this.selectedEVentInfo;
      }
   }
 }

添加用户代码：

expandAddEventMember(fullWidth) {
if (this.fullWidth === true && fullWidth === true) {
  console.log('Before');
    if (this.am !== undefined) {
      this.am.clear();
    }
  // setTimeout(() => {
    let amCompFactory: ComponentFactory<any>;
    amCompFactory = this.compFactoryResolver.resolveComponentFactory(AmComponent);
    const componentRef = this.am.createComponent(amCompFactory);
    (<AmComponent>componentRef.instance).event = this.selectedEVentInfo;
    this.fullWidth = false;
  // }, 100);
  }
}

错误：

这是我的入口组件

  entryComponents: [
AppComponent,
ForgotModalComponent,
EventDetailsModalComponent,
AddManagerModalComponent,
AddAdminModalComponent,
CopyLinkModalComponent,
OrderSummaryModalComponent,
EventPreviewModalComponent,
PaidMemberModalComponent,
SendMessageModalComponent,
TicketInfoModalComponent,
AddPaidMemberModalComponent,
MessageModalComponent,
TicketCheckInDetailModalComponent,
SaleItemModalComponent,
SaleItemListModalComponent,
ApmComponent,
PmComponent,
AsmComponent,
SlmComponent,
TiComponent,
EdComponent,
AmComponent,
SihComponent,
ImageModalComponent,
GoogleMapModalComponent
]

最佳答案

您只需要确保am和em在创建组件之前被实例化，我假设它们可以是未定义的，因为在您的代码中，您已经在某个阶段（在调用am之前）检查了em或if(this.am !== undefined)是否被实例化，但不需要调用clear。只是您需要在createComponent中包含我们的createComponent代码

  eventDetailInfo(event, source: String = null)
  { // event detail
    console.log('### Get event detail information');
    if (this.eventDetailFlag === false)
    {
      if ((source === 'list' || source === 'delete' || source === 'stripe') && this.ed !== undefined)
      { // testing needed
        console.log('clear');
        this.ed.clear();
        /*}  <======= Remove this bracket*/

        let edCompFactory: ComponentFactory<any>;
        edCompFactory = this.compFactoryResolver.resolveComponentFactory(EdComponent);
        const componentRef = this.ed.createComponent(edCompFactory);
        (<EdComponent>componentRef.instance).event = this.selectedEVentInfo;
      }/* <========== Add it here */

    }
  }

adduser相同

  expandAddEventMember(fullWidth)
  {
    if (this.fullWidth === true && fullWidth === true)
    {
      console.log('Before');
      if (this.am !== undefined)
      {
        this.am.clear();
        /* } <=== Remove this bracket **/
        let amCompFactory: ComponentFactory<any>;
        amCompFactory = this.compFactoryResolver.resolveComponentFactory(AmComponent);
        const componentRef = this.am.createComponent(amCompFactory);
        (<AmComponent>componentRef.instance).event = this.selectedEVentInfo;
        this.fullWidth = false;
      } /** <==== Add it here */

    }
  }

编辑：关于你关于规范化的评论，你可能应该打开另一个问题，因为这是一个完全不同的问题。下面的代码可能不起作用（未测试），但可以为您提供一种方法的想法

@Injectable()
export class CompFactoryHelper
{
  constructor(private resolver: ComponentFactoryResolver)
  {

  }

public createAndAddComponent(containerRef: ViewContainerRef, eventInfo : any, type: any)
   {
        containerRef.clear();
        let compFactory = this.resolver.resolveComponentFactory(type);
        const componentRef = containerRef.createComponent(compFactory);
        (componentRef.instance as any).event = eventInfo;
   }
}

在你的组件中

 expandAddEventMember(fullWidth)
  {
    if (this.fullWidth === true && fullWidth === true)
    {
      console.log('Before');
      if (this.am !== undefined)
      {
        this.compFactoryHelper.createAndAddComponent(this.am,  this.selectedEVentInfo, AmComponent);

      }

    }
  }