ngx-monaco-editor - невозможно установить размер макета при изменении контейнера (с помощью панели вкладок)

Я борюсь с экземпляром ngx-monaco-editor внутри панели вкладок primeng, который, кажется, теряет расчет размера при переключении на другую вкладку, изменении значения модели, привязанного к редактору, а затем переключении обратно на исходную вкладку опять таки.

https://stackblitz.com/edit/primeng9-tabs-monaco-editor

Шаги по репликации с использованием приведенного выше URL:

  • Вкладка "Редактор" будет изначально выбрана.
  • Выберите вкладку 2.
  • Нажмите кнопку "изменить код".
  • Вернитесь на вкладку «Редактор» и увидите, что размер редактора уменьшился.

До:

введите описание изображения здесь

После:

введите описание изображения здесь

При осмотре в Доме все еще присутствует первоначально назначенный стиль.

Как видно из исходного кода в моем примере приложения, я также попытался использовать метод редактора layout в событии изменения вкладки, чтобы попытаться принудительно пересчитать размер на основе контейнера, но это не имело никакого значения.

Интересно, что если я изменю размер окна, это, похоже, заставит компонент редактора снова изменить размер правильно.


angular primeng monaco-editor ngx-monaco-editor
person mindparse    schedule 24.05.2016    source источник

Ответы (3)


arrow_upward
5
arrow_downward

Не уверен, в чем заключается основная причина, но использование *ngIf в контейнере редактора устраняет проблему. Взгляните на этот < / а> -

handleTabChange(tabChangeEvent: { originalEvent: Event; index: number }) {
    if (tabChangeEvent.index === 0) {
      //this.monacoEditor.editor.layout();
      this.showEditor = true;
    } else {
      this.showEditor = false;
    }
  }

Тогда в вашем шаблоне -

<div style="height: 500px" *ngIf="showEditor">
            <ngx-monaco-editor #monacoEditor style="height:100%;" [options]="editorOptions" [(ngModel)]="code">
            </ngx-monaco-editor>
        </div>
person Akash    schedule 11.11.2020
comment
Как вы вообще это отлаживаете? Я буквально часами занимался этой конкретной проблемой, но использование * ngIf действительно решило ее. - person Gereon99; 16.03.2021

arrow_upward
2
arrow_downward

Прежде всего, обратите внимание, что проблема не связана с угловой составляющей. Это все о редакторе Monaco.

Как Монако находит свою актуальную планировку?

Рассмотрим страницу с видимым редактором Monaco внутри контейнера. Когда редактор Monaco загружен, он устанавливает размер макета в соответствии с видимым видом. Итак, что произойдет, если вы запросите обновленную информацию о Монако, когда он находится внутри скрытого контейнера? Очевидно, Монако не имеет видимого представления для установки своих макетов. Редактор устанавливает раскладку согласно скрытому виду! Вот почему вы видите точку вместо области. Теперь, когда это представление переходит в видимое состояние, редактор не обновляет макет даже путем вызова метода .layout() или установки automaticLayout: true в options. Вы можете активировать его, изменив размер браузера, снова обновив редактор или выполнив некоторые угловые трюки.

Теперь вы понимаете, как это работает. Так что не обновляйте Монако, когда вы находитесь внутри невидимого вида. Сделайте это после того, как содержащий представление станет видимым.

person Amirhossein Mehrvarzi    schedule 11.11.2020

arrow_upward
0
arrow_downward

Использование *ngIf инициализирует / уничтожает компонент ngx-monaco-editor, что может быть полезно, а может и нет.

Когда у меня есть компонент, содержащий ngx-monaco-editor, я создаю следующую функцию, которую вызываю всякий раз, когда мне нужно изменить размер редактора monaco.

    resizeComponents() {
        setTimeout(() => {
            window.dispatchEvent(new Event('resize'));
        }, 200);
    }

ПРИМЕР ИСПОЛЬЗОВАНИЯ:

Вид

<div (click)="onTabChange('myTab')">Change Tab</div>

Составная часть

onTabChange(myTab) {
   
    // execute tab change logic
    this.resizeComponents()
}

Опять же, это альтернативный подход на случай, если вы не хотите повторно инициализировать редактор.

person Jeff Wilkerson    schedule 09.07.2021