ModalHelperOptions
1 ModalHelperOptions的使用
1 使用场景
用于某些弹框的复用,如下面这个弹框是用于展示表格中某条数据,但是当我在其他地方,把某一个页面当成弹窗在另外一个地方展示
。
2 使用
- 此处使用的是
ModalHelperOptions
中创建静态弹窗(只有点击关闭弹窗才会关闭)的例子 TemplateContentComponent
是用户复用的模板{ templateId: template.messageTemplateId }
传入被复用模板中的参数,用与传递给后端获取数据,在模板中用@Input() templateId = null;
接收- 在模板中的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;
}
});
}
- 在要使用复用模板的地方,调用方法,生成弹窗
this.modal.createStatic(TemplateContentComponent, {
templateId: template.messageTemplateId }, {
size: 'lg' }).subscribe(() => {
});
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?