NgbModal открывается очень медленно для * некоторых * модальных windows - PullRequest
Новая
       28

NgbModal открывается очень медленно для * некоторых * модальных windows

0 голосов
/ 17 марта 2020

Я использую ng-bootstrap@6.0.0. Некоторые модальные диалоги открываются очень быстро, в то время как другие открываются крайне медленно (иногда для открытия требуется 15 секунд). Медленное поведение: модальное окно отображается с максимальной шириной независимо от выбранного размера, но не имеет содержимого модального тела (пока). Примерно через 15 секунд модальное окно изменяет размер до запрошенного размера, а затем заполняет его модальным телом, как и ожидалось. Я сравнил модальные компоненты, которые прекрасно работают с модальными компонентами, которые этого не делают, и вижу очень мало различий, кроме функциональных различий, которые вы ожидаете. Я попытался изменить «фон», я попытался установить «контейнер», я попытался преобразовать модальный между встроенным ng-шаблоном и отдельным компонентом. Ничто не меняет поведение медленных модалов. У кого-нибудь есть идеи?

1 Ответ

0 голосов
/ 18 марта 2020

Я использую ngx-simplemde и запускаю модал из пользовательского элемента панели инструментов в редакторе уценки. По какой-то причине при запуске модального, всплывающего окна или всплывающей подсказки из редактора уценки он ведет себя очень медленно. Мне пришлось абстрагировать мою логику c от пользовательской кнопки на панели инструментов ngx-simplemde и запустить модал, открывающийся снаружи элемента пользовательской панели инструментов ngx-simplemde. Это было довольно сложно понять, так как мне пришлось создать скрытую кнопку, а затем вызвать скрытую кнопку с помощью метода .click () в DOM, и 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>

component.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;
  }
...