0

我正在使用 ng-bootstrap@6.0.0。一些模态对话框打开得非常快，而另一些则打开得非常快缓慢（有时需要 15 秒才能打开）。缓慢的行为是：模式窗口以最大宽度显示，无论选择的大小如何，但还没有模式正文内容。大约 15 秒后，模态窗口调整为请求的大小，然后按预期填充模态体。我已经比较了可以正常工作的模态组件和不能正常工作的模态组件，除了您期望的功能差异之外，几乎没有什么区别。我试过改变“背景”，我试过设置“容器”，我试过在一个内联的 ng-template 和一个单独的组件之间转换模态。没有什么能改变慢模态的行为。有没有人有任何想法？

4

1 回答 1

0

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

组件.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);
  }

modal.service.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;
  }
于 2020-03-17T22:30:50.570 回答