关于angular的ModalHelperOptions

1 ModalHelperOptions的使用

1 使用场景

用于某些弹框的复用，如下面这个弹框是用于展示表格中某条数据，但是当我在其他地方，把某一个页面当成弹窗在另外一个地方展示。

2 使用

1. 此处使用的是ModalHelperOptions中创建静态弹窗（只有点击关闭弹窗才会关闭）的例子
2. TemplateContentComponent 是用户复用的模板
3. { templateId: template.messageTemplateId } 传入被复用模板中的参数，用与传递给后端获取数据，在模板中用@Input() templateId = null; 接收
4. 在模板中的ngOnChange(){}方法中放入，以templateId为参数获取后端数据的方法。

 ngOnChanges(changes: SimpleChanges): void {
    this.getTemplate();
  }
	getTemplate() {
    this.http.get(this.url + '/' + this.templateId).subscribe(res => {
      if (res.status === 0) {
        this.templateVisible = true;
        this.template = res.data;
        this.template.fallBack = this.template.fallBack ? "1" : "0";
        this.template.fallBackContent = this.parseFallBackContent(this.template.fallBackContent);
        this.contentRoot = JSON.parse(this.template.content)[0];
        this.templateVisible = true;

        this.previewData = this.msg5gService.getMobilePreviewData(this.contentRoot);
        this.getTemplatePreviewDetail();
      }
    });
  }

  getTemplatePreviewDetail() {
    this.http.get(this.previewDetailUrl + `${this.templateId}/preview-detail`).subscribe(res => {
      if (res.status === 0) {
        let previewDetail = res.data;
        this.previewData.sender = previewDetail.chatbotName;
        let parentMenu = previewDetail.chatbotMenus.filter(item => item.parentId == 0);
        parentMenu.forEach(parentMenu => {
          parentMenu.hasSubMenu = previewDetail.chatbotMenus.filter(item => item.parentId == parentMenu.id).length > 0;
        });
        this.previewData.chatbotMenuList = parentMenu;
        this.previewVisible = true;
      }
    });
  }

5. 在要使用复用模板的地方，调用方法，生成弹窗

   this.modal.createStatic(TemplateContentComponent, { templateId: template.messageTemplateId }, { size: 'lg' }).subscribe(() => {
    });

1 注意

1. 如果你的angular组件（被复用的那个）要注册于module中，然后放入ngModule中的entryComponents属性中

entryComponents: [...COMPONENTS_NOROUNT],

@NgModule({
  imports: [SharedModule, MsgManageRoutingModule],
  declarations: [...COMPONENTS],
  entryComponents: [...COMPONENTS_NOROUNT],
  providers: [Message5gService, AddresseeServiceService, CustomerService, DatePipe],
  exports: [],
})
export class MsgManageModule {}

2. 然后再调用组件的ngModule中引入才能生效。

@NgModule({
  imports: [SharedModule, BusinessStatisticsRoutingModule,MsgManageModule],
  declarations: [...COMPONENTS],
  entryComponents: COMPONENTS,
})
export class BusinessStatisticsModule {
}

3. 不然就会报如下错误。

No component factory found for TemplateContentComponent. Did you add it to @NgModule.entryComponents?