对于某些模式窗口，NgbModal打开速度非常慢

Question

我正在使用ng-bootstrap@6.0.0.一些模式对话框打开得非常快，而另一些模式对话框则打开得非常慢(有时需要15秒才能打开(。缓慢的行为是：无论选择的大小如何，模式窗口都以最大宽度显示，但还没有模式正文内容。大约15秒后，模式窗口的大小调整为请求的大小，然后按预期填充模式主体。我比较了工作良好的模态组件和不工作的模态组件，发现除了功能差异之外，几乎没有什么差异，正如你所期望的那样。我试过更改"背景"，我试过设置"容器"，我尝试过在内联ng模板和单独组件之间转换模态。没有什么能改变慢语气词的行为。有人有什么想法吗？

Answer 1

我正在使用ngx-simplemde，并从markdown编辑器中的自定义工具栏项启动模态。出于某种原因，当从markdown编辑器中启动模态、popover或工具提示时，它的行为非常缓慢。我不得不从自定义ngx-simplemde工具栏按钮中抽象出我的逻辑，并触发从ngx-simplemde自定义工具栏项目外部打开的模态。这很难理解，因为我必须创建一个隐藏按钮，然后使用DOM的.click((方法触发隐藏按钮，并且设置按钮的ngClick来启动模式弹出。不理想，相当粗糙，但它现在起作用了。

component.html

<simplemde [(ngModel)]="value" [options]="{ toolbar: toolbar }" (ngModelChange)="valueChange.emit($event)" #smde></simplemde>
<button type="button" class="btn btn-primary" (click)="insertImage()" style="display: none" #buttonElement>Test</button>

组件.ts

createImageListToolbar() {
return {
name: 'image-list',
className: 'fas fa-images',
title: this.imageListButtonTitle,
// This action is called when the user clicks the button
// It will open the imageListModal that is embedded in the HTML of this component
// When the modal closes, the user will have selected the image they want inserted
action: async () => {
this.buttonEle.nativeElement.click();
}
};
}
async insertImage() {
const image = await this.modalService.getMediaSelection(this.implementationGuideId, this.mediaReferences);
const doc = this.simplemde.Instance.codemirror.getDoc();
const cursor = doc.getCursor();
const altTag = image.title ? `alt="${image.title}" ` : '';
const replaceText = `<table><tr><td><img src="${image.name}" ${altTag}/></td></tr></table>`;
doc.replaceRange(replaceText, cursor);
}

模式服务.ts:

async getMediaSelection(implementationGuideId?: string, mediaReferences?: MediaReference[]): Promise<ImageItem> {
const modalRef = this.modalService.open(MediaSelectionModalComponent, { container: 'body', backdrop: 'static' });
modalRef.componentInstance.implementationGuideId = implementationGuideId;
modalRef.componentInstance.mediaReferences = mediaReferences;
return await modalRef.result;
}

Answer 2

这可能是由更改检测问题引起的。尝试在变化检测区域中打开模态。

注入区：

constructor(
private modalService: NgbModal,
private zone: NgZone,
) { }

并用zone.run:包裹modalService.open

confirmDelete(user: DSUser): void {
this.zone.run(() => {
const modalRef = this.modalService.open(ConfirmModalComponent, {
backdrop: true,
centered: true,
}).componentInstance;
modalRef.message = `<strong>Are you sure you want to delete <span class="text-primary">"${user.name.firstName} ${user.name.lastName}"</span> profile?</strong>`;
modalRef.confirmCallback = () => this.deleteUser.emit(user);
});
}